如何在Vue组件中显示上传的图片？

Question

我的代码像这样:

<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>

演示和完整代码如下: https://codepen.io/moschel26/pen/jwdMgp 共有5个输入文件。当我上传图像到第3个输入文件时，只在img 3上显示图像。当我上传图像到第5个输入文件时，只在img 5上显示图像。等等。

我该怎么做？

- moses toh

Answer 1

你应该创建一个对象数组来设置上传的图片。

<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>

完整的示例请参见：https://codepen.io/emils/pen/VWgpaJ

- Emīls Gulbis