Фильтрация данных из базы данных с использованием v-for

Question

Здесь я попытался сделать константные данные внутри скрипта (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;
}

И имел это в моем v-for

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

Он отфильтровывает отфильтрованные элементы изпустой массив событий.

Поскольку мои постоянные данные слишком много.Я попытался создать API.

И вот как я получаю данные из базы данных.

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

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

И перебираю их, используя v-for

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

Изздесь я знаю только, как вызвать конкретные данные через усы.Я не могу сделать фильтр, который я использую при использовании константных данных.

Answer 1

Если я правильно понимаю вопрос, вы можете отфильтровать данные из бэкэнда через вычисленные свойства .

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

, в вашем шаблоне вы можете перебрать это новое свойство

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