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

Question

我遇到了 Vue.js 中计算的属性的问题，它用在 v-if 中。找不到解决或重构这个问题的方法。欢迎指点。

上下文： 我显示数组中的各种元素（用 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>

Answer 1

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

Answer 2

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

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

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

Filtering problem with v-if and v-for in Vue.js

vue.js

vue-directives