单击事件更改过滤器vue.js

Question

我想通过更改单击事件上的filterKey更改过滤器，这可能吗？还是有更好的方法来实现这一目标？

<a href="#" v-on:click="filterKey = 'all'">All</a> 
<a href="#" v-on:click="filterKey = 'nearby'">Nearby</a> 

<ul v-for="user in users | filterBy filterKey"> 
    <li>{{user.name}}</li> 
</ul> 

data() { 
    return { 
     filterKey: 'all', 
     users: users, 
    } 
}, 

filters: { 
    all: (users) => { 
     return users 
    }, 
    nearby: (users) => { 
     return users.filter((users) => { 
      return users.distance <= 15 
     }) 
    } 

} 

Answer 1

您可以使用计算的属性，如果你想使用类似你有什么办法。你可以这样做：

new Vue({ 
    el: '#app', 
    data: { 
    userFilterKey: 'all', 
    users: [ 
     { name: 'Bill Close', distance: 10 }, 
     { name: 'Bill Far', distance: 100 }, 
     { name: 'Bill Criswell', distance: 1 } 
    ] 
    }, 
    computed: { 
    userFilter() { 
     return this[this.userFilterKey] 
    }, 
    all() { 
     return this.users 
    }, 
    nearby() { 
     return this.users.filter((user) => user.distance <= 15) 
    } 
    } 
}) 

那么你的模板可以是这个样子：

<div id="app"> 
    <button v-on:click="userFilterKey = 'all'" :class="{ active: userFilterKey == 'all' }">All</button> 
    <button v-on:click="userFilterKey = 'nearby'" :class="{ active: userFilterKey == 'nearby' }">Nearby</button> 
    <ul> 
    <li v-for="user in userFilter"> 
     {{ user.name }} 
    </li> 
    </ul> 
</div> 

下面是这个动作演示：https://jsfiddle.net/1f9ytasb/

不过，如果你打算过滤通过多个事情可能会更容易创建一个过滤器标准数组，并只有一个filtered计算属性，基于该标准数组筛选出用户。