Vue : Filter on array of object for search

Question

I have an array having three objects and each object have straight key value pair.

 // Search Input
 <div class="dv-header-search">
    <input type="text" class="dv-header-input"
      placeholder="Search"
      v-model="query.search_input">
  </div>

//Table row
<tr v-for="row in filteredRow">
    <td v-for="(value, key) in row">{{value}}</td>
</tr>

data() {
  return {
    model: {},
    columns: {},
    query: {
      search_input: ''
    },
  }
},

// Setting model after API call
.then(function(response) {
    Vue.set(vm.$data, 'model', response.data.model)
})

computed: {
  filteredRow: function(){
    return this.model.data.filter((row) => {
      return row;
    });
  }
}

It gives me the following exception :

TypeError: Cannot read property 'filter' of undefined

What Am i missing here.

Answer 1

You define model as an empty object in your data method.

Even if you are setting the value of model later, your filteredRow method will fire when the component renders the template, meaning this.model.data will be undefined at that point.

The simplest fix would be to give model.data an initial value in the data method:

data() {
  return {
    model: { data: [] },
    columns: {},
    query: {
      search_input: ''
    },
  }
},