v-for和组件外部（croppa）

Question

我有一个Vue Croppa的动态组件。

<croppa v-for="(image, key) in images" :key="key" ...props></croppa>

如果我在images中添加一个元素，它会添加一个新的croppa组件并且工作完美。

问题是当我尝试删除元素时。

例如，如果我添加了3张图片：

images: [
'image1.png',
'image2.png',
'image3.png,
]

如果我删除image2 (index: 1)它删除image3。

我需要做些什么来保持croppa的所有配置（初始图像，位置，flipX等...）？

谢谢

Answer 1

使用qazxsw poi参数qazxsw poi指令（在你的情况下是qazxsw poi）是设置项index属性的可靠方法，只有当循环数组（在你的情况下v-for）不会被变异时。

在上面的示例中，当key长度更改渲染项目的索引保持不变时。意思是，如果删除了第二个项目，渲染器可以注意到关键索引的更改 从key到images因此，删除了具有最后一个索引images的项目。

为了实现预期的行为，应将0, 1, 2属性设置为唯一值。对于对象数组，它通常是0, 1或任何唯一属性。对于字符串数组（如果数组中的值是唯一的），可以将2属性设置为该值。例：

key

如果该数组中的某些值不唯一（如果值来自外部源 - API，用户输入等，则应假设），id属性应设置为连接值和索引。例：

key