Хорошо, у меня есть форма с массивом строковых локалей ('it', 'en' и т. Д.), Поэтому я сделал простой v-for для отображения удаленного поиска el-select из ElementUI .
(Для тех, кто не знает, el-select с удаленным поиском, это своего рода выбор, который сделал вызов API, чтобы получить значения с сервера, чтобы заполнить список параметров, пока пользователь пишет, поэтому он начинается с пустогосписок опций и каждый раз заполняется на основе ввода пользователя тем, что возвращает сервер.)
Изначально мой массив был просто [null], поэтому в форме отображается пустой el-select, но спросто добавьте кнопку, я могу array.push(null), чтобы развернуть ее.
Код рендеринга списка имеет вид
<div v-for="(locale, index) in locales"
:key="index">
/*...*/
</div>
, поэтому я использую свой индекс массива для поддержания состояния.
Пока все хорошо: при выборе данных из el-select и при нажатии код работает нормально.
Проблема возникает, когда я удаляю один из элементов массива, но последний с array.splice(index,1):правильный элемент массива удален, но он как vue только что удаленпоследний из el-select, но не тот, который относится к правильному элементу массива, поэтому теперь каждый выбор из индекса удаленного элемента массива до последнего имеет значение, не соответствующее его параметрам.
например:мой массив ['it','fr','es','ko'], поэтому мои входные данные отображают «итальянский», «французский», «испанский», «корейский»;но при удалении array[1] -> 'fr' я получил мои выборки, отображающие 'Italian', 'es', 'ko'.
Просто, чтобы быть понятным, мой массив содержит String элемент, а не Object s, поэтому пример из документов не применяется, поскольку он использует объект.
Как мне сохранить состояние при удалении элемента массива?