Javascript V-validate不使用插值属性

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

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

{{errors.first（propertyName）}

但是如果我不想在JavaScript中硬编码验证规则呢？我认为这是可行的：

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

{{errors.first（propertyName）}

---

但没有出现任何验证错误。你知道我做错了什么吗？

我已经创建了JSFIDLE，一切似乎都很好。请随时查看：

//js
数据（）{
返回{
规则：{规则：'必需'}，
电子邮件：“”
}
},

我已经创建了JSFIDLE，一切似乎都很好。请随时查看：

//js
数据（）{
返回{
规则：{规则：'必需'}，
电子邮件：“”
}
},

我只需要从v-validate属性中删除冒号，然后对象就可以工作了。即使用

v-validate

而不是

：v-validate

。我感到困惑，因为将JavaScript与其他Vue属性一起使用需要冒号。

我只需要从v-validate属性中删除冒号，然后对象就可以工作了。即使用

v-validate

而不是

：v-validate

。我感到困惑，因为将JavaScript与其他Vue属性一起使用需要冒号。

这帮助我认识到

v-validate

属性接受对象时不需要冒号（

：v-validate

），这是我的问题。这帮助我认识到

v-validate

属性接受对象时不需要冒号（

：v-validate

），这是我的问题。

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