Проблема с фильтрацией v-if и v-for в Vue.js

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>

Если вы хотите отобразить элементы "не ноль" перед, и, в конце, "нулевые" элементы, вы должны создать два различных вычисляемых свойства, одно для элементов "не ноль" и одно для элементов "ноль", а затем:

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