Question

对于Vue来说，这是一个非常新的事物，似乎与这个小小的话题相距甚远，并且需要一些指导。我正在为一个旅游网站开发酒店应用程序，该应用程序可在网页上显示酒店，我想通过多个复选框根据其属性/等级来切换酒店。

我正在尝试根据我的主数组中hotel对象内的布尔值应用条件类。当我在v-bind中应用三元表达式时，此方法有效，但当我将其转换为计算值时，它不再识别酒店数组中的值。代码和JSfiddle，有什么想法吗？

工作示例

<div v-if="" id="hotel-card" class="card" v-bind:class="[hotel.spa ? spaClass : '', hotel.family ? familyClass : '', twoStarClass]" v-for="hotel in filteredList">
    <img id="hotel-thumbnail" v-bind:src="hotel.img"/>

    <p class="hotel-loc">{{ hotel.loc }}</p>
    <h3 class="hotel-title">{{ hotel.title }}<h3>
    <p class="hotel-desc"> {{ hotel.desc }} </p>
      <p class="hotel-loc">{{ hotel.star }} Star</p>
   <a v-bind:href="hotel.link" target="_blank"><button class="btn-dark">From £{{hotel.price}}pp </button></a>

不工作

<div v-if="" id="hotel-card" class="card" v-bind:class="classObject" v-for="hotel in filteredList">
    <img id="hotel-thumbnail" v-bind:src="hotel.img"/>

    <p class="hotel-loc">{{ hotel.loc }}</p>
    <h3 class="hotel-title">{{ hotel.title }}<h3>
    <p class="hotel-desc"> {{ hotel.desc }} </p>
      <p class="hotel-loc">{{ hotel.star }} Star</p>
    <a v-bind:href="hotel.link" target="_blank"><button class="btn-dark">From £{{hotel.price}}pp </button></a>

     </div>

<script>
computed: {
 classObject: function () {
 return {
 'spa': hotel.spa,
'two-star': hotel.star,
'family': hotel.family,
}}
</script>

Answer 1

由于要遍历filterList，因此需要使用方法而不是计算属性`

methods: {
    classObject: function (hotel) {
        return {
            'spa': hotel.spa,
            'two-star': hotel.star,
            'family': hotel.family
        }
    }
}

然后在模板中

<div 
    v-for="hotel in filteredList"
    class="card" 
    v-bind:class="classObject(hotel)"
>

（我删除了id，因为这将导致多个具有相同ID的元素。）

类绑定，数组语法问题

1 个答案: