如何在 Vuejs 中改进这种计算？

Question

我正在尝试根据条件返回计算结果。但是，如果条件失败，我考虑返回 null ，然后在添加 v-if 作为结果时变得丑陋。这是它的样子：

   AreAllItemsAvailable() {
      const finalAvailableItems = this.allItems.filter(
        item => this.availableItems.includes(item.id),
      )
      if (finalAvailableItems.length) {
        return finalAvailableItems.every(item => item.count === '1')
      } else {
        return null
      }
    },

然后在模板中，我有这样一个东西：

v-if= "AreAllItemsAvailable !=null && !AreAllItemsAvailable"

如何改进？

Answer 1

filter 方法如果没有找到任何匹配项，则返回一个空数组[]，因此您可以保留一个返回数组（填充或空）的过滤器方法并对其进行迭代：

 AreAllItemsAvailable() {
     return this.allItems.filter(
        item => this.availableItems.includes(item.id) && item.count === '1',
      )

}

在模板中：

 v-for="item in AreAllItemsAvailable"

Answer 2

要清理，您可以添加一个中间计算值：

finalAvailableItems() { 
    return this.allItems.filter(
            item => this.availableItems.includes(item.id)
          )
    }

AreAllItemsAvailable() {
        return this.finalAvailableItems.every(item => item.count === '1');
    },

无需返回空值：如果您的目标是检查所有项目是否可用，则布尔值 AreAllItemsAvailable 将在 finalAvailableItems 为空时返回 False

v-if= "!AreAllItemsAvailable"