复V-如果在计算属性内？

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

First：

• 当您在<script>标记中时，需要将this放在要从vue data访问的变量前面。例如，在代码中，使用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)
      })
    }
  }

Answer 2

尝试使用方法而不是使用计算属性，方法是将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>

​