Question

我有一组道具，它们都是道具，并使用计算属性进行过滤。我需要一种方法来知道计算出的属性已完成过滤。

如果没有过滤的项目，或者我根本不需要显示消息的项目。但是当计算出的属性正在过滤项目数组时，会显示“无项目”消息一秒钟。

那么有什么方法可以知道何时完成计算吗？

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

最好的策略可能是根据此示例使用斗篷指令
How to hide raw content during loading with 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;
}

Fiddle

Answer 2

您可以将ready: false添加到data()对象，然后在完成过滤后将其设置为true：

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

然后，仅当没有任何项目时显示您的消息，并且和为true：

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

工作示例：https://jsfiddle.net/gq9b63xk/

Vue-知道何时完成计算

2 个答案: