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.

Where is `saveUserUpdate` being called? – Cody Ｇ Jul 15 '19 at 12:18 — Cody Ｇ, Jul 15 '19 at 12:18
on inline save button for every row – Savan S Jul 17 '19 at 06:58 — Savan S, Jul 17 '19 at 06:58

score 0 · Answer 1 · answered Jul 15 '19 at 15:15

0

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.

answered Jul 15 '19 at 15:15

Ryley

21,046
2
67
81

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

1 Answers1