使用函数将 v-show 设置为 true 或 false

Question

我有一个使用 Vue 渲染的属性列表（房屋、公寓……）。

每个属性的显示或不显示取决于某些类似于过滤器的按钮。这些“过滤器”设置在我的数据对象中：

data: {
    properties: myPropertiesList,
    rooms: {
        1: false,
        2: false,
        3: false,
        4: false,
    },
    type: {
        flat: false,
        house: false,
        field: false
    }
},

当用户点击选项按钮时，我将这些选项设置为 true 或 false。

目前，我用当前表达式设置 v-show：

v-show="rooms[property.Rooms] && type[property.Category]"

<div v-show="rooms[property.Rooms] && type[property.Category]" 
        class="col-md-3" 
        v-for="property in properties"
    >
        <property :property="property"> 
</div>

...而且效果很好。但是，我宁愿做这样的事情：

v-show="showProperty(property)"

... 并编写返回 true 或 false 的 showProperty() 函数。

1. 这样的事情可能吗？
2. 如果是，你在哪里声明函数？我在方法对象中尝试过，但它不起作用。

Answer 1

Jeff 建议的过滤器的使用是可行的方法，但我想回答您的直接问题，这是否可能具有功能，因为它是。

您只需将函数添加到组件方法对象中：

methods: {
  showProperty (property) {
    return this.rooms[property.Rooms] && this.type[property.Category]
  }
}

Answer 2

这看起来像是对v-for过滤的调用：

...
data:function(){
    properties:MyPropertyList,
    rooms: [1,2,3,4],
    types: ['flat','house','field']
},
...

<div v-for="property in properties | filterBy Room in rooms | filterBy Category in types" 
    class="col-md-3"
>
    <property :property="property"> 
</div>

仅当property.Room 在rooms 数组中，并且property.Category 在types 数组中时才会显示属性。

如果您像现在一样需要对象中的房间和类型，您可以使用计算属性来创建用于过滤的数组。

computed:{
  roomList:function(){
    //go through the rooms object and return an array of the true ones
  }
}

如果您想使用自定义函数进行过滤，您可以：

<div v-for="property in properties | filterBy showPropertyFilter rooms type">

在这一切之前，创建过滤器：

Vue.filter('showPropertyFilter',function(properties, rooms, type){
    //return only the properties that should show
});