验证“必需”忽略 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>

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

Answer 1

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

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

另一个元素输入为： id:user_id

请注意，如果您没有操作该值，然后它丢失了引用，例如：

data: {user: {name: null}}

并且您通过 API 填充了它，但后来在创建或安装的 put 中填充了它像这样的东西：
this.user = {}

参考 user.name 消失了，验证无法再工作。