Question

我在v-if中使用的Vue.js中的计算属性遇到麻烦。找不到解决或重构此问题的方法。一些方向将受到欢迎。

上下文：我显示数组中的各种元素（由Axios生成），并且在模板的每个div中，我都获得了该数组中一个元素的值。它可以正常工作。

问题：该数组的某些元素为空，对于这些元素，我希望不显示任何内容，或者在某些情况下，显示具有常规内容的替代div。那就是我有问题的地方。我使用计算属性检查数组的元素是否为空。然后，我将其用于v-if中。

代码：（替换内容就是这种情况）

methods: {
    getItem() {
          axios.get('http://4.4.4.4/api/table?&filter[where][name]=' + this.txtInput).then(response => {
            this.items = response.data
          })
    this.txtInput=''
    } 
}

计算出的属性受second answer here的启发）：

computed: {
 nonNullArticle: function() {
      return this.items.filter(i => i.article !== null)
    }    
}

在模板中：

<div v-if="nonNullArticle">
    <div v-for="item in nonNullArticle">{{ item.article }}</div>
</div>

<div v-else>
    <p>alternate content</p>
</div>

Answer 1

如果要保留原始顺序并显示不同的内容：

<div v-for="item in this.items">
    <div v-if="item">{{ item.article }}</div>
    <div v-else>alternate content</div>
</div>

如果要在“ null”项之前和之后显示“ not null”项，则应创建两个不同的计算属性，一个用于“ not null”元素，一个用于“ null”元素，以及然后：

<div v-for="item in nonNullArticle">{{ item.article }}</div>
<div v-for="item in nullArticle">alternate content</div>

Answer 2

执行filter总是返回一个数组，即使它为空也是如此。因此，应该检查<div v-if="nonNullArticle">

而不是检查<div v-if="nonNullArticle.length">

Vue.js中的v-if和v-for过滤问题

2 个答案: