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

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

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