V-for и внешний компонент (croppa)
У меня есть динамический компонент с Vue Croppa.
<croppa v-for = "(image, key) in images" :key = "key" ...props></croppa>
Если я добавлю элемент в images, он добавит новые компоненты обрезки и будет работать идеально.
Проблема в том, что я пытаюсь удалить элемент.
Например, если я добавил 3 изображения:
images: [
'image1.png',
'image2.png',
'image3.png,
]
если я удалил image2 (index: 1), он удалит изображение3.
Что мне нужно сделать, чтобы сохранить всю конфигурацию (исходное изображение, положение, flipX и т. д.) кадрирования по положению?
Спасибо
Ответы 1
Использование аргумента index директивы v-for (в вашем случае key) является надежным способом установки атрибута элемента key, только если зацикленный массив (в вашем случае images) не будет видоизменяться.
В приведенном выше примере при изменении длины images индексы отображаемых элементов остаются прежними. Это означает, что если второй элемент был удален, рендерер может заметить изменения ключевых индексов
от 0, 1, 2 до 0, 1
Таким образом, элемент с последним индексом 2 удаляется.
Для достижения ожидаемого поведения атрибуту key должно быть присвоено уникальное значение. Для массива объектов это обычно id или любое уникальное свойство. Для массива строк (если значения в массиве уникальны) атрибуту key может быть присвоено это значение. Пример:
<croppa
v-for = "image in images"
:key = "image"
/>
В случае, если некоторые значения в этом массиве не уникальны (что следует предполагать, если значения поступают из внешнего источника — API, пользовательский ввод и т. д.), атрибуту key следует присвоить конкатенированное значение и индекс. Пример:
<croppa
v-for = "(image, index) in images"
:key = "`${image}${index}`"
/>
Я добавил :key = "JSON.stringify(image)"и вроде работает. Странная вещь
Спасибо за ответ, я проверил и не работает. Когда я добавил 3 Croppa с индексом
${image}${index}и сделал соединение (1, 1); (только для теста и удалите второй элемент массиваimage) он по-прежнему показывает элемент0, 1, а не0, 2