使用 vee-validate 在 vue js 中验证时出错

Question

我是 vue.js 的新手。 我正在尝试使用 vee-validate 库为表单添加验证，但出现以下错误：

属性或方法“错误”未在实例上定义，但在渲染期间被引用。 确保在 data 选项中声明反应数据属性。

渲染 function 时出错：“TypeError：无法读取未定义的属性‘具有’”

vue.version = ^2.3.3

vee-validate.version = ^3.4.5 代码是：

<div class="tile is-parent">
      <article class="tile is-child box">
      <h1 class="title">Add new AC Default</h1>
          <form>
            <div class="field">
              <label class="label">Name</label>
              <div class="control">
                <input name="name"
                       v-model="form.name"
                       v-validate="'required|min:3'"
                       v-bind:class="{'is-danger': errors.has('name')}"
                       class="input" type="text" placeholder="Full name">
              </div>
              <p class="help is-danger" v-show="errors.has('name')">
                {{ errors.first('name') }}
              </p>
           </div>
          </form>
      </article>
</div>

脚本是：

import Vue from 'vue';
...

export default {
    components: {
      ...
    },
    data() {
      return {
        form: {
          entityId: '',
          defaultValue: '',
          displayName: '',
          name: '',
        },
      };
    },
    created() {
      this.getInitialData();
    },
    computed: {
      ...
    },
    methods: {
     
      getInitialData() {
        ...
      },
    },
  };

我在这里想念什么？

Answer 1

您正在尝试使用errors ，但它没有在您的data中或作为prop定义。

当你实例化VeeValidate时，你可以像这样传递一个errorBagName ：

Vue.use(VeeValidate, {
    events: 'blur',
    errorBagName: 'vErrors',
});

然后在您的组件中，您可以通过vErrors.collect('name')收集错误。 我还建议将您的错误包命名为更详细的名称，例如vErrors而不仅仅是errors ，以防止潜在的冲突。