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.

Can you please show us exactly what the data in model looks like? — Ohgodwhy
– Ohgodwhy, Commented Jan 11, 2018 at 21:53
You define model as an empty object in your data method. So this.model.data is going to be undefined. So in your filteredRow computed, this.model.data.filter is what's throwing the error. — thanksd
– thanksd, Commented Jan 11, 2018 at 21:53
it's exactly as @thanksd has said. Just define model: { data: [] } and on page load you won't have that error anymore. The promise object is not resolving in time. Alternatively, you can use a v-if="model.data !== undefined" if you'd rather have the template handle it. — Ohgodwhy
– Ohgodwhy, Commented Jan 11, 2018 at 22:00

thanksd · Accepted Answer · 2018-01-11 22:01:29Z

5

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

answered Jan 11, 2018 at 22:01

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gammer Over a year ago

Fixed, Awesome. A quick one @thanksd, Search is not working. It should be working with that fix ?

thanksd Over a year ago

That's a very broad question and probably deserves a separate post including a minimal, complete, and verifiable example of the issue you're having

Gammer Over a year ago

Yeah sure, Thanks :)

Collectives™ on Stack Overflow

Vue : Filter on array of object for search

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related