Vuejs remove row dynamically with selected image

Question

I was follow the answer below to work with add row dynamically. This is the link

Everything is alright until I wanted to remove row dynamically. I used splice to remove row but my issue is that the images that I have selected to each row is messed up after I remove the selected row.

The images below can spot the different.

So, as you can see the image that I selected for these rows are 1, 2 and 3.

Now I remove the second row which has image name 2.

My expected result is that the file should be 3 as I removed the 2nd row. The 2nd row is removed but the image label is remain the same.

This is my code.

<div
   class="row"
   style="margin-bottom: 10px;"
   v-for="(item, index) in form.rowData"
   :key="index"
>
    <div class="col-md-3">
       <div class="form-group">
          <label for="inputSelect" class="col-lg-3">Amount</label>
          <div class="col-lg-8">
             <div class="bs-component">
                <input
                      v-model="form.rowData[index].amount"
                      type="number"
                      step="0.01"
                      id="inputStandard"
                      class="form-control"
                 />
             </div>
          </div>
        </div>
     </div>
     <div class="col-md-4">
        <div class="form-group">
          <label for="inputSelect" class="col-lg-3">Image</label>
          <div class="col-lg-8">
            <div>
               <input
                  v-if="uploadReady"
                  type="file"
                  :name="index"
                  accept="image/*"
                  @change="onFileChange"
                />
              </div>
            </div>
          </div>
       </div>
       <div class="col-md-1">
         <div v-if="index == form.rowData.length -1">
           <a @click="addItem">
             <span style="font-size:30px;" class="fa fa-plus-circle" />
            </a>
          </div>
          <div v-else>
           <a @click="removeItem(index)">
                  <span style="font-size:30px; color: red;" class="fa fa-times-circle" />
            </a>
          </div>
       </div>
</div>

methods: {
    addItem() {
        var my_object = {
        amount: "",
        image: ""
       };
       this.form.rowData.push(my_object);
    },
    removeItem(index) {
      this.form.rowData.splice(index, 1); 
    },
}

Is anyone can help with this issue? Im using vueJs and used splice to remove the element in rowData.

I think u have used the index field in v-for loop. If you delete the second element of an array with 3 elements, the index of the third element automatically gets updated to 2. — Nitheesh, Oct 21 '19 at 10:18

score 0 · Answer 1 · answered Oct 21 '19 at 10:17

0

In your v-for loop add an index.

Example:

<div v-for="(value,index) from data" :key="index">
   <button @click="deleteRow(index)">DELETE</button>
</div>


methods: {
    deleterRow(index){
      this.data.splice(index,1)
    }
}

answered Oct 21 '19 at 10:17

Renato Manalili

480
3
8

my row is deleted but my input for image is not updated as expected. – Dave Cruise Oct 21 '19 at 10:50

score 0 · Answer 2 · answered Oct 21 '19 at 10:23

To make sure vue.js is not only aware of the position, but of the actual list item you should bind an unique key to your list like v-for="item in items" :key="item"

Using the index as a key could be tricky. A better way to do this using a real unique key. If you are sure that item will be unique you could use it.

score 0 · Answer 3 · answered Oct 21 '19 at 10:56

when working with list i would suggest to create custom class for collection and collection item then you can bind directly to this classes from template.

Something like this:

class FileItem {
    constructor() {
        this.title = "";
    }
}

class FileCollection {
    constructor() {
        this.items = [];
    }

    add(item) {
        this.items.push(item);
    }

    addNew() {
        this.add(new FileItem());
    }

    remove(item) {
        var index = this.items.indexOf(item);
        if (index > -1) {
            this.items.splice(index, 1);
        }
    }
}

new Vue({
    el: '#app',
    data() {
        return {
            fileCollection: new FileCollection()
        }
    }
})

Then in template you can use it as:

<button @click="fileCollection.addNew"></button>

<table>
    <body>
        <tr v-for="item in fileCollection.items">
            <td>{{ item.title}}</td>
            <td>
                <v-btn @click="fileCollection.remove(item)">Remove</v-btn>
            </td>
        </tr>
    </body>
</table>

Also inside collection class you can control how to generate id for item-key property.

Vuejs remove row dynamically with selected image

3 Answers3