Question

我已经检查了其他问题，并且已经阅读了有关“就地补丁”功能的信息，所以我尝试向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);            
        },

我在接头前后记录了数组的值，并且删除了正确的元素，但是在显示中显示错误，总是删除了最后一个元素，我还缺少什么？谢谢！

Answer 1

这是因为key。当您将循环的索引用作key时，您告诉Vue您的元素由其索引标识。

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

由于Vue通过索引标识您的元素，因此具有最后一个索引的元素将被删除。

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

Vue.js从列表中删除元素将始终删除for的最后一项

1 个答案: