VeeValidate 不适用于内联编辑。我正在使用 v-for 和 v-if 进行内联编辑

Question

我有用户列表内联编辑表结构。每行代表一个用户。我正在编辑用户并使用 vee validate 进行验证

validateState(ref) {
    if (
      this.veeFields[ref] &&
      (this.veeFields[ref].dirty || this.veeFields[ref].validated)
    ) {
      return !this.veeErrors.has(ref)
    }
    return null
  },

  saveUserUpdate: function(user) {
    this.$validator.validateAll().then((result) => {
      debugger
      if (!result) {
        return
      } else {
        //code to save user api
      }
    })
  }

<tr v-for="(user, userIndex) in userList" :key="userIndex">
  <td>
    <span v-show="user.isEditing">
			<b-form-input size="sm" v-model="user.fullName" :name="'tbnewFullName' + user.unique_id" :state="validateState('tbnewFullName' + userIndex)" :aria-describedby="'tbnewFullName-feedback' + userIndex"></b-form-input>
			<b-form-invalid-feedback :id="'tbnewFullName-feedback' + userIndex">
				Required.
			</b-form-invalid-feedback>
		</span>
    <div v-show="!user.isEditing">
      {{user.fullName}}
    </div>
  </td>
</tr>

我不知道我在这里做错了什么，但在saveUserUpdate 中没有触发验证。 validateState 中的 veeFields 列表未显示我的用户名字段。 veeFields 还显示以前表单中的字段列表。

Answer 1

您必须使用v-model="userList[userIndex].fullName。有关详细信息，请参阅here。总结是，由于 vee-validate 在内部的工作方式，他们无法跟踪范围有限的 user 变量。