Vue.js удаление элемента из списка всегда удаляет последний элемент для - PullRequest
Новая
       42

Vue.js удаление элемента из списка всегда удаляет последний элемент для

0 голосов
/ 30 октября 2019

Я уже проверил другие вопросы и прочитал о функции «исправления на месте», поэтому я попытался добавить ключ в 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);            
        },

Я записал в журнал значение массива до и после сращивания, и нужные элементы удаляются, но на дисплее отображается неверный, всегда последний удаленный элемент,что мне не хватает? Спасибо!

1 Ответ

1 голос
/ 30 октября 2019

Это из-за key. Когда вы используете индекс вашего цикла в качестве key, вы сообщаете Vue, что ваши элементы идентифицируются по их индексу.

Когда вы удаляете элемент из вашего массива, вы перемещаете каждый индекс с точки удаления на единицу вверх, что означает, что из массива исчезает только один индекс: последний.

Поскольку Vue идентифицирует ваши элементы по индексу, элемент с последним индексом удаляется.

Вы должны использовать в качестве ключаатрибут, который уникально идентифицирует элемент, а не индекс.

...