Как создавать и добавлять элементы динамически в Vue3

Question

Суть задачи такова, дан массив пользователей которых в цикле я вывожу. У пользователя есть может быть фото или видео и мне в зависимости от типа файла нужно создать и добавить img или video. при этом нужно проверять что по данному адресу есть файл иначе отдавать картинку заглушку. В обычном js я бы сделал так

if (item.type === 'photo') {
  let imgEl = document.createElement("img");
  imgEl.src = item.name;
  myEl.append(imgEl);
} ...

как сделать это в vue, его я использую глобально через cdn v-if вариант не очень нравится так как там много логики получается? хочется как то сделать через метод

 <div class="col l3 m4 s6 xs12"
   v-for="(item,index) in users.list"
   :key="index">
    <div class="to_small_usr">
      <div class="card-image">
        <a v-bind:href="'<?= $detailProfileLink ?>?id=' + item.id">
          //<img src="http://qwitty.dsterlin.dev.iwad.ru/resources/qwitti_web/img/d-avatar.jpg" alt="">
                {{ renderFile(item.userFile[0]) }}
         </a>
      </div>
    </div>
 </div>
    ```

Answer 1

Используйте условия v-if и v-else:

Делать проверку есть файл или нет, нужно на бакенде. Затем отдавать урл на заглушку сразу в массиве данных:

 <div class="col l3 m4 s6 xs12"
   v-for="(item,index) in users.list"
   :key="index">
    <div class="to_small_usr">
      <div class="card-image">
         <div v-if="item.fileType === 'video'"><video>...</video></div>
         <div v-else><img :src="item.image"></div>
      </div>
    </div>
 </div>

Либо на строне vue (в массиве к примеру, отдаем null).

 <div class="col l3 m4 s6 xs12"
   v-for="(item,index) in users.list"
   :key="index">
    <div class="to_small_usr">
      <div class="card-image">
         <div v-if="item.fileType === 'video'"><video>...</video></div>
         <div v-else><img :src="item.image || '/image/defailt.png'"></div>
      </div>
    </div>
 </div>

БЛОГ НА HUSL

Как создавать и добавлять элементы динамически в Vue3

Ответы (1 шт):