javascript - 在 v-for 循环中记住上传时的图像位置

Question

我很难弄明白这一点。

我正在使用 Vue.js，我正在尝试创建某种仪表板，用户可以在其中上传最多五张访问者的图像，这些图像被允许使用该用户提供的某些服务。

代码如下:

<div class="row" v-for="(n, i) in 5" :key="n">
  <div :id="'popover' + visitor.id + '-' + i" variant="primary">
    <div class="card visitor-image">
      <b-popover :target="'popover' + visitor.id + '-' + i" triggers="click focus">
        <template slot="title">Edit image</template>
        <button
          v-if="checkImage(i)"
          class="btn btn-danger image-btns"
          @click="deleteImage(visitor.id, visitor.Photos[i].id)"
        >Delete</button>
        <p
          v-if="uploadProgress < 100 && uploadProgress > 0"
          class="progress-text"
        >Upload progress: {{ uploadProgress }}%</p>
        <label
          v-if="!checkImage(i)"
          :for="'image-input' + visitor.id + '-' + i"
          class="btn btn-primary image-btns"
        >Upload</label>
        <input
          class="profile-image"
          :id="'image-input' + visitor.id + '-' + i"
          type="file"
          :ref="'fileInput' + visitor.id + '-' + i"
          style="display: none"
          accept="image/gif, image/jpeg, image/png"
          placeholder="Upload"
          @change="selectFile($event, visitor.id, 'fileInput' + visitor.id + '-' + i)"
        >
      </b-popover>
      <img
        class="card-img-top profile-image"
        v-if="checkImage(i)"
        :src="getImage(i)"
        :id="visitor.Photos[i].id"
      >
      <img class="card-img-top avatar-image" v-else src="../assets/avatar.png">
    </div>
  </div>
  </div>

这里没有一个函数是重要的，唯一重要的是我正在使用的这个“v-for”循环。如您所见，我正在遍历所有访问者及其图像，并为每个访问者绑定(bind)一个键。

我想知道的是，如何使用该键，以便在我点击其中一张头像图片并上传照片后，同一张照片会上传到那个确切的 div 中？现在，无论我在哪里点击五个 div 中的一个上传图片，即使我点击列表中的最后一个 div，它也会显示在第一个 div 上。

谢谢

Answer 1

我已经在 v-for 循环中创建了用于文件上传的 codepen。我已经使用 splice 在特定索引处添加图像。请引用以下代码笔以获取更多详细信息。

codepen - https://codepen.io/anon/pen/XGYoyr