やりたいこと

現在、ElementUIとNuxt.jsでサーバサイドで発生したエラー（一意制約違反）のメッセージを
Form-Item Attributesのerrorに設定することで表示させているけど、2度目の操作で祭表示されない。

暫定対処

ソースをみるとerrorをwatchしているけど、その中でエラーメッセージのレンダリングの判定を操作している。多分watchの反映がされる前に、レンダリングが走っている模様。

取り敢えず、待ちの処理を入れて対策。きちんと同期をさせていないがそもそもこんな状況になるということは何か、入り口が間違っている気がする。terateilに初めて質問してみたけどまだ回答はない。

ソース

抜粋。(全部はterateilに張っておいた）

<template>
  <section class="container">
    <el-form
      ref="userForm"
      :model="userForm"
      :rules="rules"
      @submit.native.prevent>
      <el-form-item
        ref="nickname"
        :error="errorMessage"
        label="ニックネームを登録してください。"
        prop="nickname">
        <el-input
          v-model="userForm.nickname"
          type="text"
          autocomplete="off"/>
      </el-form-item>
      <el-button
        type="primary"
        @click="registNickName">登録</el-button>
    </el-form>

  </section>
</template>

<script>

export default {
  data: function() {
    return {
      userForm: {
        nickname: ''
      },
      errorMessage: '',
      rules: {
        nickname: [
          {
            required: true,
            whitespace: true,
            message: 'ニックネームは必ず入力してください。'
          }
        ]
      }
    }
  },
  methods: {
    registNickName: async function() {
        // 一意制約（ニックネーム重複）

        /*
          XXX 2度目の時にthis.errorを一度クリアしないと発火しない。
          ただし、少しまってやらないといけない。
          データの変更が非同期に走っているから整合性がとれなくなっている？
         */
        this.errorMessage = ''
        await new Promise(function(resolve, reject) {
          window.setTimeout(resolve, 10)
        })
        const duplicateMessage =
          this.userForm.nickname +
          'は既に使用されています。別のニックネームにしてください。'
        this.errorMessage = duplicateMessage

        return

    }
  }
}
</script>

いつもどおり関係ないけど

掲載してもらったBOLLOGのリンクがgoogleに認識されない。大手だけど更新がしばらく止まってるとクローラー見に行かないのかな？？