V-validate 不适用于插值属性答案

【问题标题】：V-validate not working with interpolated attributeV-validate 不适用于插值属性
【发布时间】：2019-03-14 17:29:53
【问题描述】：

当我使用静态属性时，验证错误按预期出现：

<input type="number" name="phone" v-validate="'required|digits:10'">
<span>{{ errors.first(propertyName) }}</span>

但是如果我不想在 JavaScript 中硬编码验证规则怎么办？我认为这会起作用：

<input type="number" name="phone" :v-validate="phone.rules">
<span>{{ errors.first(propertyName) }}</span>

但没有出现验证错误。任何想法我做错了什么？

【问题讨论】：

标签： javascript html validation vue.js vee-validate

【解决方案1】：

我创建了 jsFiddle，一切似乎都运行良好。随意检查： https://jsfiddle.net/m67d8f4x/2032/

<input type="email" name="email" placeholder="Email" v-validate="rules.rule" v-model="email">
// js
  data() {
    return {
      rules: { rule: 'required' },
      email: ''
    }
  },

【讨论】：

这帮助我意识到 v-validate 属性接受对象而不需要冒号 (:v-validate)，这是我的问题。

【解决方案2】：

我只需要从 v-validate 属性中删除冒号，然后对象就可以工作了。 IE。使用v-validate 而不是:v-validate。我很困惑，因为将 JavaScript 与其他 Vue 属性一起使用需要冒号。

【讨论】：