Javascript Vuejs使用选定图像动态删除行_Javascript_Html_Vue.js_Vuejs2

Javascript Vuejs使用选定图像动态删除行

javascript html vue.js vuejs2

Javascript Vuejs使用选定图像动态删除行,javascript,html,vue.js,vuejs2,Javascript,Html,Vue.js,Vuejs2,我按照下面的答案动态地添加行。在我想动态删除行之前，一切都正常。我使用splice删除行，但我的问题是，在删除所选行后，我为每行选择的图像都被弄乱了下面的图像可以发现不同的问题如您所见，我为这些行选择的图像是1、2和3 现在，我删除了第二行，它的图像名为2 我的预期结果是，当我删除第二行时，文件应该是3。删除第二行，但图像标签保持不变这是我的密码 <div class="row" style="margin-bottom: 10px;" v-for="(it

我按照下面的答案动态地添加行。

在我想动态删除行之前，一切都正常。我使用splice删除行，但我的问题是，在删除所选行后，我为每行选择的图像都被弄乱了

下面的图像可以发现不同的问题

如您所见，我为这些行选择的图像是1、2和3

现在，我删除了第二行，它的图像名为2

我的预期结果是，当我删除第二行时，文件应该是3。删除第二行，但图像标签保持不变

这是我的密码

<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); 
    },
}


数量
形象
方法：{
附加项（）{
变量my_对象={
金额：“，
图像：“
};
this.form.rowData.push（my_对象）；
},
删除项目（索引）{
这个.form.rowData.splice（索引，1）；
},
}

有人能帮助解决这个问题吗？Im使用vueJs并使用splice删除rowData中的元素。

在v-for循环中添加索引

例如：

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


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


删除
方法：{
删除箭头（索引）{
此.data.splice（索引，1）
}
}

为了确保vue.js不仅知道位置，而且知道实际的列表项，您应该在列表中绑定一个唯一的键，如

v-for=“items in items”：key=“item”

使用索引作为键可能很棘手。使用真正的唯一密钥执行此操作的更好方法。如果您确信

项

是唯一的，您可以使用它。

使用列表时，我建议为集合和集合项创建自定义类，然后您可以从模板直接绑定到此类

大概是这样的：

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()
        }
    }
})

然后在模板中，您可以将其用作：

<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>


{{item.title}
去除

在collection类中，您还可以控制如何为item key属性生成id。

您可以提供更多代码吗？请向我们展示v-for循环。我认为您已经在v-for循环中使用了索引字段。如果删除包含3个元素的数组的第二个元素，则第三个元素的索引将自动更新为2。我的行将被删除，但我的图像输入未按预期更新。