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)
  }
}

我正在尝试在offer数据属性中返回对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)

  }

}

但是我建议使用计算属性的另一种方法，该方法返回一个数组，该数组通过返回适合给定条件的项并删除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>

Answer 2

第一：

在<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)
      })
    }
  }

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

2 个答案: