[Vuejs]-Updating a data property in Vuejs based on an input event

by

1👍

Data needs to be a function, and you can use computed property for filtering:

new Vue({
  el: "#app",
  data() {
    return {
      search_input: '',
      shifts: {"John": [{"user_id": 193, "shift_hours": 0}], "Rose": [{"user_id": 194, "shift_hours": 0}]},
    }
  },
  computed: {
    searchInput() {
      return Object.keys(this.shifts).reduce((obj, key) => {
        if (key.toLowerCase().includes(this.search_input.toLowerCase())) {
          obj[key] = this.shifts[key]
        }
        return obj
      }, {} )
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="search_input" type="text" />
  <pre>{{ searchInput }}</pre>
</div>
👤Nikola Pavicevic

Leave a comment