使用函数将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-if="property.visible"

它可以正常工作。然而，我更想像这样做：

v-show="showProperty(property)"

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

1. 这种做法可行吗？
2. 如果可行，在哪里声明该函数？我尝试在methods对象中声明它，但它不起作用。

- Chuck

---

从未使用过Vue，但您可以在数据对象上定义一个方法，传递property.Rooms和property.Category属性，该方法将返回一个布尔值。如果无法这样做，您可以编写一个与数据对象外部分开的函数，传递对象、property.Rooms和property.Category属性，该函数也将根据上面的逻辑返回一个布尔值。 - ManoDestra

Answer 1

按照Jeff提出的建议使用过滤器是正确的方式，但我想回答你的直接问题：是否可以通过函数实现，答案是肯定的。

你只需要将该函数添加到组件方法对象中即可：

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

- Linus Borg

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

- Jeff

---

问题在于我无法使用filterBy，我认为这个功能有限制。我需要一种更复杂的方法来决定是否显示属性元素。因此，我的想法是使用v-show和一个函数，根据该函数中几个条件的结果返回true或false。 - Chuck

您也可以使用自定义函数来使用filterBy，详见编辑。 - Jeff

这是一篇关于创建自定义过滤器的更深入文章：http://optimizely.github.io/vuejs.org/guide/filters.html - Jeff