更改点击事件过滤器 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计算属性可以根据该条件数组过滤掉用户。