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

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

0 голосов
/ 23 сентября 2018

У меня проблемы с вычисляемым свойством в 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>

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

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

<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>
0 голосов
/ 23 сентября 2018

Выполнение filter всегда возвращает массив, даже если он пустой, что является правдой.Так что вместо проверки <div v-if="nonNullArticle"> вы должны сделать <div v-if="nonNullArticle.length">

...