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变量。