CODEWITHSUNDEEP
javascriptvue.jsfor-loopparameter-passing
VengaVenga
VengaVenga

Reputation: 760

Loop throuth a filtered list in vue.js with parameter

How to loop in vue.js through a filtered list with an input parameter given?

Pls. take into consideration that filtering like <li v-for="x in todos_filtered" v-if="x.person == 'Mike'"> should be avoided with many records.

Here the code which returns an empty list instead of 2 elements.

<html>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 0

Views: 208

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The computed property should return a function that take the person as parameter:

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

Upvotes: 1

Related Questions