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]＆amp;＆amp; 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-节目= “showProperty（属性）”

...并编写返回true或false的 showProperty（）函数。

这样的事情可能吗？
如果是，您在哪里声明该功能？我在方法对象中尝试但它不起作用。

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属性创建用于过滤的数组。

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

使用函数

2 个答案: