Vue - 在方法中过滤数组时传递过滤条件

Question

我试图在渲染之前按 filterCriteria 过滤 listItems。
问题是当我使用 Array.prototype.filter 时，我无法将 filterCriteria 传递给 filter 函数。
有什么好的方法可以在不创建新函数的情况下将其传入？
谢谢！

var todoList = new Vue({
	el: '#todolist',
	data: {
    // I want to use filterCriteria in data as filter criteria
		filterCriteria: 'Done',
		listItems: [
			{
				content: 'Fishing.',
				status: 'Done',
			},
			{
				content: 'Do homework.',
				status: 'Ongoing',
			}
		],
	},
	methods: {
		filterList(listItems) {
			return listItems.filter(function(item) {
        // Ideally the 'Ongoing' here should be "filterCriteria" in data property
			  return item.status === 'Ongoing';
			});
		}
	},
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
		<div id="todolist">
      <div class="list-filter">
        <a href="#">Ongoing</a>
        <a href="#">Done</a>
      </div>
			<div v-for="item in filterList(listItems)" class="list-item">
				<span class="list-status">{{item.status}}</span>
				<span class="list-content">{{item.content}}</span>
			</div>
		</div>

Answer 1

...无法将 filterCriteria 传递给过滤器函数。 有什么好的方法可以在不创建新函数的情况下传入吗？

是的，是的。首先，更简单，使用箭头函数进行回调：

filtered () {
  return this.items.filter(item => item.status === this.query)
}

第二，遗留，保存this对象引用：

filtered () {
  var vm = this
  return this.items.filter(function (item) {
    item.status === vm.query
  })
}

完整示例：

var todoList = new Vue({
  el: '#todolist',
  data: {
    query: 'Done',
    items: [
      {content: 'Fishing.', status: 'Done'},
      {content: 'Do homework.', status: 'Ongoing'}
    ]
  },
  computed: {
    filtered () {
      return this.items.filter(item => item.status === this.query)
    }
  }
})

<div id="todolist">
  <div>
    <button @click="query='Ongoing'">Ongoing</button>
    <button @click="query='Done'">Done</button>
  </div>
  <div v-for="item, idx in filtered" :key="idx">
    <span>{{item.status}}:</span>
    <span>{{item.content}}</span>
  </div>
</div>

<script src="https://unpkg.com/vue"></script>