时间戳

首页 > 解决方案 > 计算属性内的复杂 V-If？

javascript - 计算属性内的复杂 V-If？

问题描述

我正在尝试添加一个在模板中工作的复杂 v-if 语句，但是当我添加更多内容时，在模板中处理的内容太多了。

我已将该语句添加到计算属性中，该属性在计算属性的评估过程中引发错误。有任何想法吗？

<div v-for="offer in offers" class="grid-4 item hotel hotel-item" v-if="showOffer"> 
<!-- OFFER CONTENT HERE --> 
</div>



computed: {
  showOffer() {
    return (offer.island === filters.islandFilter || filters.islandFilter === 'All') &&
      (offer.starrating === filters.starRating || filters.starRating === 'All') &&
      (offer.board === filters.boardBasis || filters.boardBasis === 'All') &&
      (offer.duration === filters.duration || filters.duration === 'All') &&
      (offer.price.from < filters.price)
  }
}

我试图返回对 V-if 语句正确的 offer 数据属性中的每个“offer”。

标签： javascriptvue.jsvuejs2vue-component

解决方案

通过offer作为参数传递，尝试使用方法而不是使用计算属性：

  <div v-for="offer in offers" class="grid-4 item hotel hotel-item" v-if="showOffer(offer)"> 
      <!-- OFFER CONTENT HERE --> 
  </div>

methods: {

  showOffer(offer) {
    return (offer.island === filters.islandFilter || filters.islandFilter === 'All') &&
      (offer.starrating === filters.starRating || filters.starRating === 'All') &&
      (offer.board === filters.boardBasis || filters.boardBasis === 'All') &&
      (offer.duration === filters.duration || filters.duration === 'All') && (offer.price.from < filters.price)

  }

}

但我推荐另一种使用计算属性的方法，它返回一个数组，offers通过返回符合给定条件的项目并删除v-if指令来过滤你的数组：

computed: {
  comp_offers() {
    return this.offers.filter((offer) => {

      return (offer.island === filters.islandFilter || filters.islandFilter === 'All') &&
        (offer.starrating === filters.starRating || filters.starRating === 'All') &&
        (offer.board === filters.boardBasis || filters.boardBasis === 'All') &&
        (offer.duration === filters.duration || filters.duration === 'All') && (offer.price.from < filters.price)

    })
  }

}
<div v-for="offer in comp_offers" class="grid-4 item hotel hotel-item">
  <!-- OFFER CONTENT HERE -->
</div>

推荐阅读