Vue.js 如何逐个显示上传到vue组件上的图像？

我的代码如下：

<div id="app">
  <div v-for="item in items">
    <div v-if="!image">
      <h2>Select an image</h2>
      <input type="file" @change="onFileChange">
    </div>
    <div v-else>
      <img :src="image" />
      <button @click="removeImage">Remove image</button>
    </div>
  </div>
</div>

选择一个图像
删除图像

演示和完整代码如下：

有5个输入文件。我想当我上传到输入文件3的图像，然后图像只显示在img 3。当我将图像上传到输入文件5上时，图像仅显示在img 5上。等

---

我该怎么做呢？

你应该制作一个对象数组来设置上传的图像

<div id="app">
  <div v-for="item in items">
    <div v-if="!item.image">
      <h2>Select an image</h2>
      <input type="file" @change="onFileChange(item, $event)">
    </div>
    <div v-else>
      <img :src="item.image" />
      <button @click="removeImage(item)">Remove image</button>
    </div>
  </div>
</div>

选择一个图像
删除图像

完整示例如下：