4

我在 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=''
    } 
}

计算属性的灵感来自这里的第二个答案）：

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>
4

2 回答 2

3

如果你想保持原来的顺序并显示不同的内容：

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

如果您想在之前显示“not null”项，最后显示“null”项，您应该创建两个不同的计算属性，一个用于“not null”元素，一个用于“null”元素，然后：

<div v-for="item in nonNullArticle">{{ item.article }}</div>
<div v-for="item in nullArticle">alternate content</div>
于 2018-09-23T09:00:34.087 回答
1

做 afilter总是返回一个数组，即使它是空的，这是真的。所以不要检查<div v-if="nonNullArticle">你应该做<div v-if="nonNullArticle.length">

于 2018-09-23T08:57:19.120 回答