Vue2. Удаление конкретного элемента из массива
Помогите, пожалуйста, с проблемой удаления элемента в массиве. Дело в том, что мой splice, удаляет всегда последний элемент в массиве. Пробовал перебирать массив и потом удаление, эффект такой-же. 
ссылка на песочницу: https://codesandbox.io/s/wispy-snowflake-lhc1t?file=/src/App.vue
Метод RemoveField(index) {this.fields.splice(index, 1)} не удаляет выбранный элемент, удаляет всегда последний элемент массива.
Я кинул весь компонент, т.к. еще очень зеленый, возможно это даст полную картину, где я мог чудануть(
Ответы (1 шт):
в приведенном коде @click="RemoveField(index) , и что тут должно удалиться? переменная index будет иметь всегда 0. Она не определена. Тут либо реактивная переменная должна быть, либо значение какого-то поля
чтобы подсказывать что-то, надо понять. Что удалять? Список языков или уровень языка?
<select v-model="selectedSkill[index]">
<option v-for="(item, index) in skillOptions" :key="item.text">
{{ skillOptions[index].text }}
</option>
</select>
</div>
<div class="col-2 mb-1 pl-0">
<button variant="secondary" class="" @click="RemoveField(index)">
Remove
</button>
</div>
index в v-for никак не попадет в RemoveField(index) и надо понимать, что индексы в массиве источнике ну никак не транслируются в select. Там просто значения и все.
тут просто надо @click="RemoveField"
- достаточно переменной, чтобы сохранять значение текста. Можно и value, смотря какая логика
<select v-model="selectedSkill">
а в методе удаления ищем в массиве индекс элемента по текстовому совпадению и только тогда удаляем
RemoveField() {
const index = this.skillOptions.findIndex((item)=>{return (item.text===this.selectedSkill)} )
if (index > -1) {
this.skillOptions.splice(index, 1)
}
}
}
такой код будет удалять выбранные элементы в селекте скилов. поскольку общей задачи не понимаю, как-то так.