VeeValidate not working with inline editing. I am using v-for and v-if for inline editing

Question

I have user list inline editing table structure. Each row is represents a user. I am editing user and using vee validate for validation

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>

I don't know what wrong I am doing here but validations are not fired in saveUserUpdate. veeFields list in validateState are not showing my user's name field. Also veeFields is showing list of fields from previous form.

Answer 1

You have to use v-model="userList[userIndex].fullName. See here for details. The summary is, due to how vee-validate works internally, they have trouble tracking the limited-in-scope user variable.