时间戳

首页 > 解决方案 > Vue.js 从列表中删除元素总是删除 for 的最后一项

vue.js - Vue.js 从列表中删除元素总是删除 for 的最后一项

问题描述

我已经检查了其他问题，并且已经阅读了“就地补丁”功能，所以我尝试在 v-for 中添加一个密钥，但仍然没有成功，有人可以帮助我吗？

这是我当前的代码：

// THE COMPONENT

Vue.component('host-query', {

    props : {
        "queryvalue" : { type : Object, default : {} },        
    },

    template :  '<div class="input-group">' +
                    '<input class="form-control input-sm col-sm-2" v-bind:class="{ wrongInput : inputError }" v-bind:value="setInput(queryvalue)" @keyup="keyPressed" @input="updateInput($event.target.value)">' +
                    '<span class="input-group-btn">' +
                        '<button class="btn btn-sm btn-danger" @click="deleteQuery"> X </button> ' +
                    '</span>' +
                '</div>',

    data() {
        return {
            inputError : false,
            keyPressTimeout : null,
            inputValue : ''
        }
    },

    methods : {
        deleteQuery() {
            this.$emit('delete-query');
        },

        setInput(objValue) {
            if (!this.inputValue) {
                this.inputValue = JSON.stringify(objValue);
            }
            return this.inputValue;
        },

        keyPressed() {
            clearTimeout(this.keyPressTimeout);
            this.keyPressTimeout = setTimeout(this.validateAndUpdateInput, 1000);
        },

        validateAndUpdateInput() {
            let jsonValue = null;
            try {
                jsonValue = JSON.parse(this.inputValue);
                if (Object.keys(jsonValue).length == 1) {
                    this.inputError = false;
                    this.inputValue = '';
                    this.$emit('input', jsonValue);
                } else {
                    this.inputError = true;
                }
            } catch (e) {
                this.inputError = true;
            }
        },

        updateInput(value) {
            this.inputValue = value;
        }
    }
});



// HERE IS THE HTML

<div class="box host-selector-query-container" v-for="(queryObj, hostQueryIndex) in bundle.hostSelector" v-bind:key="hostQueryIndex">
                                        <host-query v-model="queryObj.query"
                                                    v-bind:queryvalue="queryObj.query"
                                                    v-bind:index="hostQueryIndex"
                                                    @delete-query="removeHostQuery(bundle, hostQueryIndex)">
                                        </host-query>
                                    </div>


// AND THE DELETE QUERY FUNCTION

removeHostQuery (bundle, index) {            
            bundle.hostSelector.splice(index, 1);            
        },

我控制台在拼接之前和之后记录了数组的值，并且正在删除正确的元素，但是在显示中显示错误，总是删除最后一个元素，我错过了什么？谢谢！

标签： vue.jsv-forhtml-rendering

解决方案

这是因为key。当你使用循环的索引作为 时key，你告诉 Vue 你的元素是由它们的索引标识的。

当您删除数组中的一项时，会将删除点的每个索引向上移动一个，这意味着只有一个索引从数组中消失：最后一个。

由于 Vue 是通过索引来识别你的元素，所以最后一个索引的元素被删除了。

您应该使用唯一标识元素而不是索引的属性作为键。

推荐阅读