Question

我有一个循环，其中有数组中的项。当我尝试删除一个项目时，它将删除最后一个项目而不是选定的项目。有人可以帮我吗？

演示可以在这里查看：

https://jsfiddle.net/frontero/f3cLqkt0/1/

<div id="form">


<div v-for="(item, index) in items" class="mt-3" :list="index" :key="item.index">
                        <div class="form-row">
                            <div class="col-md-11">
                                <input type="text" class="form-control" name="video[]" placeholder="For example https://www.youtube.com/watch?v=sds-EeX1s  or  https://vimeo.com/ondemand/horse">
                            </div>
                            <div class="col-md-1"><button type="submit" class="btn btn-light w-100" :data-index="index" @click.prevent="deleteVideo(index)"><i class="fas fa-trash-alt"></i> Delete</button></div>
                        </div>
                    </div>

                    <button class="btn btn-secondary mt-3" @click.prevent="addVideo"><i class="fas fa-plus-square"></i> Add a extra video</button>

          </div>


new Vue({
        el: '#form',
        data: {
            name: '',
            items: []
        },
        methods: {
            addVideo(){
                console.log(this.items);
                this.items.push({
                    value: ''
                });
            },
            deleteVideo(index){
                console.log(index);
                this.items.splice(index,1);
            }
        }
    });

Answer 1

item.index未定义。因此，您通过undefined字段跟踪项目，而vue不知道如何将数据与渲染的节点相关联。

使用有效的密钥（商品ID）或hack-商品本身 https://jsfiddle.net/82dsnyg0/ ：）

<div v-for="(item, index) in items" :key="item">...

Vue需要知道如何将“ item”映射为“ html”（以及如何从js-item中获取html节点）。如果没有键，则html的值是“相等的”（对于Vue），Vue试图重用已经渲染的html节点（这就是为什么最后一个节点看起来像被删除的原因。

使用键，vue可以通过js-item接收html-node，并知道在删除js-item时应删除哪个html-node。

因此，切勿在没有适当的v-for的情况下使用:key！

Answer 2

您似乎没有在任何地方定义item.index。：key的想法是为对象使用唯一的标识符，以使其保持同步。如果项目是唯一的，则应使用:key="item"。

查看文档以获取更多详细信息：
https://vuejs.org/v2/guide/list.html#key

Vue删除数组中的最后一项而不是ID

2 个答案: