クリックイベントのフィルタを変更するvue.js

Question

clickイベントで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/

けれども、あなたがでフィルタリングを予定している場合複数のことがあれば、フィルター基準の配列を作成し、その基準配列に基づいてユーザーをフィルターに掛ける計算プロパティーを1つだけ持つ方が簡単かもしれません。