Question

我很难解决这个问题。

我正在使用Vue.js，并试图创建某种仪表板，用户可以在该仪表板中上传最多五位访问者的图像，以允许他们使用该用户提供的某些服务。< / p>

代码如下：

<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”循环。如您所见，我正在遍历所有访客及其图像，并为每个访客绑定一个密钥。

我想知道的是，如何使用该键，以便一旦单击其中一个头像图像并上传照片，同一张照片就会在该div中上传？现在，无论我单击五个div之一来上传图像，即使单击列表中的最后一个div，该图像也将显示在第一个div上。

谢谢

Answer 1

I have created the codepen for file upload inside the v-for loop. I have used splice for adding an image at a particular index. Please refer the following codepen for more detail.

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

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

1 个答案: