变量为空时的 v-bind答案

【问题标题】：v-bind when variable is empty变量为空时的 v-bind
【发布时间】：2020-04-13 17:39:15
【问题描述】：

我使用 Vue，我有一个变量。当变量有值时，我会显示一个图像 (pic1)。

当变量没有值（=empty）时，我会显示另一个图像（pic2）。

我的代码...

<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 个独立的选项：

v-else 不起作用，它只显示了带有 item.var 的帖子（丢弃了其他带有空 item.var 的帖子）
使用 .length - 根本不起作用

如何让它发挥作用？

【问题讨论】：

您确实需要键入图像元素。您的 v-for 也没有所需的 in variable 部分，这应该会导致编译错误。除此之外，我希望第一个选项可以工作，但是在不知道item.var 中的内容的情况下，我无法真正告诉您出了什么问题。您是否尝试过记录您正在循环的任何变量以查看其中的内容？
我认为问题在于您没有完整的 v-for 指令语句。应该是 v-for="(item, index) in items 或任何你的 items 数组被调用。否则，key 组中的每个项目都应该有一个 key 属性，但这不会导致初始渲染出现问题。这是一个示例代码笔，可能会让您朝着正确的方向前进：codepen.io/mcmillenb/pen/yLYNrqN
尝试v-if="!item.var.length > 0"作为第二个选项
嘿@Rju，显示你的项目列表它包含什么？

标签： javascript vue.js vuejs2

【解决方案1】：

什么是 item.var？你确定你的文件路径是正确的吗？路径是否需要单引号和双引号？移除其中一对。图像也有文件类型（例如 .jpg）。如果修复这些问题没有帮助，请将图像源与“require”绑定，例如： <img :src="require('./images/pic.png')" />

【讨论】：

【解决方案2】：

您确定传递给 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'">

【讨论】：