Блог

Главная - Вопросы по программированию - Запоминание положения изображения при загрузке внутри цикла v-for

Запоминание положения изображения при загрузке внутри цикла v-for

#javascript #html #css #vue.js

#javascript #HTML #css #vue.js

Вопрос:

Мне трудно разобраться в этом вопросе.

Я использую 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 amp;amp; 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? Прямо сейчас, где бы я ни щелкнул по одному из пяти divs для загрузки изображения, оно будет отображаться в первом div, даже если я нажму на последний div в списке.

Спасибо

Ответ №1:

Я создал codepen для загрузки файла внутри v-for цикла. Я использовал splice для добавления изображения с определенным индексом. Пожалуйста, обратитесь к следующему коду для получения более подробной информации.

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