VueJs - 从列表中删除文件输入组件

Question

我还是vue.js的新手。 我最近创建了一些vue组件来整理我的html。组件是不同的输入，例如text和checkbox。他们使用$emit('input', val)更新父项数据。并确保components使用props和watch() props上的watch()是最新的。

现在在<input type="file />上使用<input type="file" />时出现问题，因为您无法像在其他输入类型上那样设置输入值。

使用此示例： https://jsfiddle.net/minde281/nyu73dz6/25/

我有一份清单，在这种情况下，是购物清单上的物品。您可以为每个项目添加图像。

加载图像并将其添加到列表中。这很好。

解决我的问题：

• 将图像添加到 item1
• 点击X按钮
删除该项目

现在结果是 item2 将在watch()上显示该图像。预览按预期工作，因为这可以通过脚本设置，因此使用html markup。但不知何故，vue删除了download_to的错误部分，导致最后一个被删除。

有没有不同的方法来解决这个问题？或者有没有办法告诉vue删除html标记的正确部分？

-Minde

Answer 1

Vue尝试重用该组件，这就是删除组件后所选文件在第二个输入中的原因。

为了防止你应该使用这样的键绑定：

 <li v-for="(item, index) in items" :key="item.name">

现在孔组件被移除，一切都应该按预期工作。