CODEWITHSUNDEEP
vuejs2laravel-5.4
Pidz
Pidz

Reputation: 15

Filter data from database using v-for

Here I tried making a const data inside the script(vue js).

data() {
    return {
    event: [],
    items: [
      [id: '1', month:'January', date:'01'],
      [id: '2', month:'February', date:'03'],
    ]}
}
filter(val) {
  let items = this.items;
  let filter = items.filter(el => el.month === val);
  this.event = filter;
}

And had this in my v-for

<h1 v-for="(item, id) in event" v-bind:key="id"></h1>
<p>{{ items.month }}</p>

It loops the filtered items from the empty event array.

Since my const data is too many. I tried creating an API.

And this is how I get the data from database.

data() {
  return {
    Items: [],
  }
}

getHoliday(){
    getTest.getHoliday()
            .then(response =>{
                this.Items = response.data;
            })
    },

And loop through it using v-for

<h1 v-for="(Item, id) in Items" v-bind:key="id"></h1>
<p>{{ Item.month }}</p>

From here, I only know how to call the specific data through mustache. I can't do the filter that I use when using const data.

Upvotes: 0

Views: 421

Answers (1)

Alex Pavlov
Alex Pavlov

Reputation: 113

If I understand the question correctly, you can filter data from backend via computed properties.

computed: {
    filteredItems() {
        return this.Items.filter((item) => {...});
    },
},

in your template you can iterate over this new property

<h1 v-for="(Item, id) in filteredItems" v-bind:key="id">{{ Item.month }}</h1>

Upvotes: 1

Related Questions