CODEWITHSUNDEEP
javascriptarraysobjectsearchvue.js
Gammer
Gammer

Reputation: 5628

Vue : Filter on array of object for search

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.

Upvotes: 4

Views: 3017

Answers (1)

thanksd
thanksd

Reputation: 55664

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: ''
    },
  }
},

Upvotes: 5

Related Questions