Vee Validate handling dynamic input rows

Question

I am trying to validate a dynamically added input field. Whenever I just have one row of inputs to validate, it works great.

Working case example:

However, whenever I add a row, the validation validates both the first row, and the added row - instead of validating each row individually. This is the problem case.

Problem case example:

The docs suggest giving a unique id for the :key, however, even after adding a unique id field, I'm seeing the issue.

Here is my code for generating the inputs

   <!-- Generate input fields and v-model -->
    <tr v-for="(row, rowIndex) in dataFields" :key="row.id">
      <td v-for="(fieldName, fieldNameIndex) in fieldNames" :key="fieldNameIndex">
        <!-- create first row and add valdiation -->
        <input
          type="text"
          class="input-style"
          v-model="dataFields[rowIndex][fieldName]"
          v-validate.initial="'required'"
          :name="fieldName"
        >
        <br>
        <span> errors.first(fieldName)}}</span>

And here is a full demo of the problem: https://codesandbox.io/s/vue-template-rtjj9?fontsize=14

How can I add validation to each dynamically added row?

ittus · Accepted Answer · 2019-07-27 05:09:24Z

4

You can add rowIndex to name to make them different

<tr v-for="(row, rowIndex) in dataFields" :key="row.id">
  <td v-for="(fieldName, fieldNameIndex) in fieldNames" :key="fieldNameIndex">
    <!-- create first row and add valdiation -->
    <input
      type="text"
      class="input-style"
      v-model="dataFields[rowIndex][fieldName]"
      v-validate.initial="'required'"
      :name="fieldName + rowIndex"
      :data-vv-as="fieldName"
    >
    <br>
    <span @click="clicky()">{{errors.first(fieldName + rowIndex)}}</span>
  </td>
</tr>

Note that you can use data-vv-as to customize the name field in validation message.

Demo here

answered Jul 27, 2019 at 5:09

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vee Validate handling dynamic input rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related