v-bind, когда переменная пуста

Question

Я использую Vue, и у меня есть переменная. Когда переменная имеет значение, я показываю изображение (рис. 1).

Когда переменная не имеет значения (= пусто), тогда я показываю другое изображение (рис. 2).

Мой код .. .

<template v-for="(item, index) in items">
<img v-if="item.var" v-bind:src="'/images/pic1'">
<img v-else v-bind:src="'/images/pic2'">

<img v-if="item.var.length > 0" v-bind:src="'/images/pic1.jpg'">
<img v-if="item.var.length == 0" v-bind:src="'/images/pic2.jpg'">
</template>

Я в основном пробовал 2 независимых варианта:

1. с v-else, который не работал, и он показывал мне только сообщения с item.var (other посты с пустым item.var отброшены)

2. с .length - не работает вообще

Как заставить это работать?

Answer 1

Вы уверены, что данные в v-for были переданы правильно?

проверьте ваш элемент итерации на item.var,

v-for should look like 
v-for="(item, index) in items"

Я только что проверил:

  data() {
return {
  item :  {
      var: [
        1,2,3
      ]
    }
  }
}

и я вижу мона;)

 <img v-if="item.var" v-bind:src="'https://tineye.com/images/widgets/mona.jpg'">

Answer 2

Что такое item.var? Вы уверены, что ваш путь к файлу правильный? И вам нужны одинарные и двойные кавычки для пути? Удалить одну из пар. Изображения также имеют тип файла (например, .jpg). Если решение этих проблем не помогает, свяжите источник изображения с помощью «require», например: <img :src="require('./images/pic.png')" />