使用参数循环遍历 vue.js 中的过滤列表

Question

如何使用给定的输入参数循环 vue.js 过滤列表？

请问。考虑到对于许多记录应该避免像 <li v-for="x in todos_filtered" v-if="x.person == 'Mike'"> 这样的过滤。

这里的代码 returns 一个空列表而不是 2 个元素。

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>

<div id="app">
  <ul>
    <li v-for="x in todos_filtered('Mike')">
      {{ x.text }}
    </li>
  </ul>    
</div>

<script>
myObject = new Vue({
  el: '#app',
  data: {  
    todos: [
      { person: 'Mike', text: 'Learn JavaScript' },
      { person: 'Luke', text: 'Learn Vue.js' },
      { person: 'Mike', text: 'Build Something Awesome' }
    ]
  },
  computed: {
    todos_filtered(person) {
      return this.todos.filter((x) => x.person === person);
    }
  },
})
</script>
</body>
</html>

Answer 1

计算出的属性应该return一个以person为参数的函数：

  computed: {
    todos_filtered() {
      return (person)=> this.todos.filter((x) => x.person === person);
    }
  },

使用参数循环遍历 vue.js 中的过滤列表

Loop throuth a filtered list in vue.js with parameter

javascript

for-loop

parameter-passing

vue.js