Vue - знать, когда вычисление сделано

Question

У меня есть массив предметов, поступающих в качестве реквизита, которые фильтруются с вычисляемым свойством.Мне нужен способ узнать, что вычисленное свойство выполнено фильтрацией.

в случае, если нет отфильтрованных элементов или элементов вообще, мне нужно отобразить сообщение.но в то время как вычисляемое свойство фильтрует массив элементов, в течение секунды отображается сообщение «нет элементов».

, так есть ли способ узнать, когда вычисление выполнено?

https://jsfiddle.net/6cdutrob/

<ul>
 <li v-for="(item, index) in filteredItems" :key="index">{{item.name}</li>
</ul>
<div v-if="filteredItems.length === 0">
   No items.
</div>

Answer 1

Я заметил, что больше, чем просто Нет элементов , показываемых до того, как рендер установится, также есть проблеск {{item.name}} .

Лучшей стратегией может быть использование директивы плаща в соответствии с этим примером
Как скрыть необработанный контент во время загрузки с помощью v-cloak .

html

<div id="app"  v-cloak>
  <ul>
    <li v-for="(item, index) in filteredItems" :key="index">{{item.name}}</li>
  </ul>
  <div v-if="filteredItems && filteredItems.length === 0">
    No items.
  </div>
</div>

css

[v-cloak] {
  display: none;
}

Скрипка

Answer 2

Вы можете добавить ready: false к объекту data(), а затем установить его на true после завершения фильтрации:

filteredItems() {
  var items = this.items.filter(item => item.name === 'NAME1');
  this.ready = true;
  return items;
}

Затем показывать ваше сообщение только при отсутствии элементов и ready is true:

<div v-if="ready && filteredItems.length === 0">

Рабочий пример: https://jsfiddle.net/gq9b63xk/