Vuelidate "required" 忽略 JS 中的属性值

Question

我创建了一个向导表单，它使用 Vuelidate 来验证它的字段。大多数字段只有“必需”功能，所以我的验证接近于此：

validations() {
    if (this.currentStep === 0) {
      return {
        person: {
          name: {
            required,
          },
          age: {
            required,
          },
        }
      }
    } else if (this.currentStep === 1) {
      return {
        person: {
          street: {
            required,
          },
          city: {
            required,
          },
          state: {
            required,
          },
        }
      }

问题是，我从 API 接收此数据，因此用户可以自己填写字段，也可以让机器为他填写。当我收到数据时，我在JS中的一个函数中将此属性设置为接近以下内容：

attributeData():
  this.person.name = apiData.name;
  this.person.age = apiData.age;
  this.person.street = apiData.street;
  this.person.city = apiData.city;
  this.person.state = apiData.state;

如果用户键入信息，则一切正常。如果我收到来自 API 的信息，那么我会收到错误信息，就好像输入为空一样。

我的 HTML 中的每个字段都是这样组织的：

<b-form-group label="Name">
  <b-form-input
   v-model="person.name"
   type="text"
   size="sm"
   :class="{
     'is-invalid':
       submitted && $v.person.name.$error,
   }"
   ></b-form-input>
    <div
     v-if="submitted && $v.person.name.$error"
     class="invalid-feedback"
     >
     <span v-if="!$v.person.name.required"
     >Name is required.</span
    >
  </div>
</b-form-group>

知道为什么 Vuelidate 在我直接在 JS 中赋予它们时无法识别这些值吗？我在另一页中以完全相同的方式进行了此操作，并且有效。在 DevTools 中，甚至 Vuelidate 的 $model 也具有来自 API.

的值

Answer 1

如果您有两个元素使用相同的标识符，则可能会发生此错误。示例：

data: {user_id: null} 并在一个输入中设置 v-model="user_id"。

另一个元素输入：id:user_id

当心如果你没有操纵值然后它丢失了引用，示例：

数据：{用户：{名称：空}}

你用 API 填充了它，但后者在 created 或 mounted 中放了类似的东西： this.user = {}

引用 user.name 已消失，无法再进行验证。

Vuelidate "required" 忽略 JS 中的属性值

Vuelidate "required" ignoring value attributed in JS

html

javascript

vue.js

vuejs2

vuelidate