[Vuejs]-How to delete the row without affecting the other rows

by

0👍

✅

Your problem is caused by the fact that your rows don’t have a proper stable unique ID, and that you’re instead using their array index as the :key in your v-for directive. The reason this is a problem is that when you delete an element from an array using .$delete(), all the later elements get shifted down to a new, lower index so that the array remains contiguous.

The solution is to give your rows a unique ID. A simple global counter will do just fine:

var counter = 0;  // global counter for row IDs (or anything else that needs one)

export default {
  // ...
  methods: {
    addRow() {
      this.inputs.push({
        category: '',
        subcategory: '',
        sku: '',
        description: '',
        image: '',
        id: ++counter  // this gives each row a distinct ID number
      })
    },
  // ...
}

Then you can use this unique ID as the :key in your v-for directive:

  <li v-for="(input, index) in inputs" :key="input.id">
    <request-part :index="index" :input="input" :inputs="inputs">
    </request-part>
    <hr />
  </li>

Leave a comment