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

Question

我正在尝试添加一个在模板中工作的复杂 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 语句的每个“报价”。

Answer 1

通过将 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)

  }

}

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

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>