Vee Validate 3.0 - 属性或方法 "required" 未在实例上定义但在渲染期间被引用

Question

我觉得我现在几乎已经掌握了 Vee Validate 3.0，但我在运行时不断收到以下警告：

Property or method "required" is not defined on the instance but referenced during render

我正在使用包含管道的正则表达式验证，因此我需要作为对象而不是字符串发送。

这是我的代码：

<ValidationProvider :rules="{ required, regex: /^(0[1-9]|1[0-2])\/\d{4}$/ }" name="exp" v-slot="{ errors }">
  <input name="exp" v-model="payment.exp" placeholder="Expiry MM/YYYY" class="form-control"/>
  <span class="warning">{{ errors[0] }}</span>
</ValidationProvider>

一切都在没有警告的情况下编译，并且验证在运行时正常工作，但是控制台上的警告是什么？

有人知道我需要做什么才能删除它吗？

Answer 1

为简洁起见，我将省略正则表达式。这不是 vee-validate 问题，您正在将规则道具绑定到一个对象：{ required }

现在 required 的计算结果是什么？因为你没有在你的组件中的任何地方定义 required 你会得到这个错误就像模板中任何未定义的反应性道具一样。

我假设您希望您的字段为必填项，因此您需要为 required 键提供一个值：

<ValidationProvider :rules="{ required: true }" name="exp" v-slot="{ errors }">
  <input name="exp" v-model="payment.exp" placeholder="Expiry MM/YYYY" class="form-control"/>
  <span class="warning">{{ errors[0] }}</span>
</ValidationProvider>

Vee Validate 3.0 - 属性或方法 "required" 未在实例上定义但在渲染期间被引用

Vee Validate 3.0 - Property or method "required" is not defined on the instance but referenced during render

vue.js

vee-validate

Vee Validate 3.0 - 属性 或方法 "required" 未在实例上定义但在渲染期间被引用

Vee Validate 3.0 - Property or method "required" is not defined on the instance but referenced during render

vue.js

vee-validate

Vee Validate 3.0 - 属性或方法 "required" 未在实例上定义但在渲染期间被引用