时间戳

首页 > 解决方案 > Vee Validate 3.0 - 未在实例上定义“必需”属性或方法，但在渲染期间引用

vue.js - Vee Validate 3.0 - 未在实例上定义“必需”属性或方法，但在渲染期间引用

问题描述

我觉得我现在几乎已经掌握了 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>

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

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

标签： vue.jsvee-validate

解决方案

为简洁起见，我将省略正则表达式。这不是 vee-validate 问题，您正在将 rules 属性绑定到一个对象：{ 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>

推荐阅读