Не могу удалить элемент input из списка — всегда удаляется последний?

Question

[Leopandro]

<div class="row" v-for="(address, i) in form.addresses_to" :key="i">
                      <!--begin::Col-->
                      <div class="d-flex col-12 justify-content-between mb-7">
                        <!--begin::Input group-->
                        <div class="flex-fill">
                          {{address}}
                          <!--begin::Select Picker-->
                          <SelectPicker :placeholder="'Выберите куда'" @select="selectAddressTo($event, i)"></SelectPicker>
                          <!--begin::Select Picker-->
                        </div>
                        <div class="w-50px"
                             @click="deleteAddress(i)"
                             role="button">
                          <i class="ki-duotone ki-cross fs-3x text-danger"
                             v-show="deleteButtonVisible">
                            <i class="path1"></i>
                            <i class="path2"></i>
                          </i>
                        </div>
                        <!--end::Input group-->
                      </div>
                      <!--end::Col-->
                    </div>

Создаю допустим 3 инпута, c такими значениями - 1, 2, 3
удялаю первый элемент - остается 1, 2. , еще раз первый остается 1. SelectPicker остается и никуда не двигается вне зависимости от form.addresses_to - он к нему не привязывается.

если что jsfiddle тут https://jsfiddle.net/ztoqf456/

Comments

[Leopandro]

https://jsfiddle.net/ztoqf456/

Answer 1

[0xD34F]

v-for="(address, i) in form.addresses_to" :key="i"

всегда удаляется последний

Конечно последний. Индекс в качестве ключа - хуже, чем ничего. Индекс ключом быть не может, думаете, что ключи есть, а на самом деле их нет. А если ключей нет, то

Vue использует алгоритм, минимизирующий перемещение элементов

Т.е., было в массиве N значений, на основе которых создано N элементов. Одно значение из массива выкидывается, значит, и элементов должно остаться N - 1. Какой удалить проще всего? - последний, не надо будет перемещать элементы, расположенные за ним.

Сделайте нормальные ключи - добавьте объектам address свойства id, имеющие уникальные значения, и используйте их в качестве ключей.

Answer 2

[SymphoGraph]

Так происходит потому, что на какую бы из кнопок вы не нажали, происходит вызов метода delete1 с кодом this.todos.splice(0, 1);
То есть, он не знает какая именно кнопка нажата, но знает, что надо выполнить splice(0, 1).

Чтобы изменить это поведение, следует в метод delete1 передать индекс элемента, который требуется удалить:
<button v-on:click="delete1(i)">

delete1: function(i){
    	this.todos.splice(0, 1); // Измените splice(0, 1) таким образом, чтобы из массива удалялся элемент с индексом i
    }

Comments

[Leopandro]

Так он удаляет первый элемент, а удаляется последний.

[SymphoGraph]

Leopandro, это иллюзия.
В этом легко убедиться: попробуйте <input type="text" :value="todo.text"> и вы сразу увидите какой элемент удаляется на самом деле.

[0xD34F]

SymphoGraph, а теперь вместо :value забейте в input'ы значения руками, и посмотрите, кто удаляется на самом деле.

[SymphoGraph]

0xD34F, удаляется первый элемент массива. Что забито руками в элемент input никакого отношения к массиву не имеет.

[0xD34F]

SymphoGraph, ну тогда вы не о том говорите. Посмотрите ещё раз на заголовок вопроса - речь не про данные, а про DOM-элементы.

[SymphoGraph]

0xD34F, в том и дело. Автор пока что не видит между ними разницы, поэтому стоит сделать её более очевидной. В дальнейшем уточнить целесообразность их удаления, вместо изменения содержимого. Или обратить внимание, что возможно input и вовсе нужен только один, а остальные элементы только отображающие.
То есть, до ключей ему необходимо сделать ряд иных последовательных умозаключений.