Filter list with Vue.js

by

Use computed properties – something like this (Example bellow filter items by type)

const app = new Vue({

  el: '#app',

  data: {
     search: '',
     items: [
       {name: 'Stackoverflow', type: 'development'},
       {name: 'Game of Thrones', type: 'serie'},
       {name: 'Jon Snow', type: 'actor'}
     ]
  },

  computed: {
    filteredItems() {
      return this.items.filter(item => {
         return item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1
      })
    }
  }

})

Template: 

  <div id="app">

    <div v-for="item in filteredItems" >
      <p>{{item.name}}</p>
    </div>

    <input type="text" v-model="search">

  </div>

Demo: http://jsbin.com/dezokiwowu/edit?html,js,console,output

More Related Contents:

  1. What does the @ mean inside an import path?
  2. How to fix navigator / window / document is undefined in Nuxt
  3. Why does Prettier not format code in VS Code?
  4. Vue.js – How to properly watch for nested data
  5. How to format Vuetify data table date column?
  6. How to listen for ‘props’ changes
  7. Accessing Vuex state when defining Vue-Router routes
  8. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  9. Vue.js: Conditional class style binding
  10. Running an Express server middleware alongside Nuxt
  11. How can I get query parameters from a URL in Vue.js?
  12. How to load all server side data on initial vue.js / vue-router load?
  13. Access vue instance/data inside filter method
  14. Call a Vue.js component method from outside the component
  15. How to access to a child method from the parent in vue.js
  16. How to set up flexible grid in Vue Material
  17. How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?
  18. Vue: How do I call multiple functions with @click?
  19. How can I bind the html content in vuejs?
  20. How to update the document ID in firebase firestore? [duplicate]
  21. Vue 3 reactivity not triggered from inside a class instance
  22. Passing props with programmatic navigation Vue.js
  23. VueJs templating. How to load external templates
  24. Vue.js – update router view
  25. Importing javascript file for use within vue component
  26. How to disable ESLint in vue-cli?
  27. Vue.js unknown custom element
  28. How to navigate using vue router from Vuex actions
  29. Axios request giving getter setter methods instead of data queried
  30. What’s the correct way to pass props as initial data in Vue.js 2?

Leave a Comment