计算属性内的复杂 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 语句的 offer 数据属性中的每个“offer”。

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>

Answer 2

第一：

• 当你在你的<script>标签内时，你需要把this放在你想从你的vuedata访问的变量前面。例如，在您的代码中，使用this.filters.islandFilter 而不是filters.islandFilter。 filters.islandFilter 是从模板访问 filters 时使用的语法，而不是从脚本标签内访问。
• 您正在尝试访问计算属性中的offer，但您的方法不知道offer 是什么。您可以使用方法而不是计算属性并调用showOffer(offer)。但好的做法是对您的数据使用过滤器（请参阅下一段）

那么：

v-for 和 v-if 语句在大多数情况下不能很好地混合。如果你只想渲染你的offers 的一部分，你应该创建一个计算属性来返回你过滤的报价列表，然后使用 v-for 。

例如， 在您的模板标签中：

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

在你的脚本标签中：

  data: {
    offers: [
       //your list of offers
    ]
  },
  computed: {
    filteredOffers () {
      return this.offers.filter(offer => {
        return (offer.island === this.filters.islandFilter || this.filters.islandFilter === 'All') &&
          (offer.starrating === this.filters.starRating || this.filters.starRating === 'All') &&
          (offer.board === this.filters.boardBasis || this.filters.boardBasis === 'All') &&
          (offer.duration === this.filters.duration || this.filters.duration === 'All') &&
          (offer.price.from < this.filters.price)
      })
    }
  }