單擊事件更改過濾器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計算屬性，基於該標準數組篩選出用戶。