web-dev-qa-db-ja.com

vue2とvee-validate-ES6なしでエラーメッセージをカスタマイズする方法

（成功せずに）vee-validateのエラーメッセージをカスタマイズしようとしていますが、Webサイトのすべての例でES6を使用しています。私はそれがなくてもそれができることは間違いないので、私が間違っていることの提案はありがたいです:)

<script>
    const messages = {
      en: {
        confirmed: "Your password is not confirmed",
        email: "I really dont like your email"
      }
    };

    Vue.use(VeeValidate);
    var app = new Vue({
        el: '#app'            
    });
    app.$validator.updateDictionary(messages);
</script>

エラーはなく、単にデフォルトのメッセージが使用されます。

[〜＃〜]更新[〜＃〜]

以下は私のHTMLコードです。

<input type="text" name="email" v-validate data-vv-rules="required|email" />
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>

<input type="password" name="password" v-validate data-vv-rules="required" />
<span v-show="errors.has('password')">{{ errors.first('confirmation')}} </span>  
<input type="password" name="confirmation" v-validate data-vv-rules="confirmed:password"/>
<span v-show="errors.has('confirmation')">{{ errors.first('confirmation')}}/span>
vue.jsvuejs2
7
Lech Migdal

() =>は ES6 で関数を定義するための構文なので、vee-validateの構文を古いJavaScriptに変換します。

ドキュメント から：

alpha: () => 'Some English Message'

同等になります

alpha: function() {
  return 'Some English Message'
}

同様に、次の変更を行う必要があります。

<script>
    const messages = {
      en: {
        confirmed: function () { 
            return "Your password is not confirmed"
        },
        email: function () { 
            return "I really dont like your email"
        }
      }
    };

    Vue.use(VeeValidate);
    var app = new Vue({
        el: '#app'            
    });
    app.$validator.updateDictionary(messages);
</script>

回答例と実際の例

上記のコードにいくつかの構文エラーがあるようです。以下は最新の vee-validate syntax を使用した作業コードです。

<script>
const dictionary = {
  en: {
    messages: {
      confirmed: function () { 
        return "Your password is not confirmed"
      },
      email: function () { 
        return "I really dont like your email"
      }
    }
  }
};

VeeValidate.Validator.updateDictionary(dictionary);
Vue.use(VeeValidate);
Vue.config.debug = true;
var App = new Vue({
    el: '#app'
});
</script>

動作中 フィドル 。

8
Saurabh