使用v-for从数据库中过滤数据

Question

在这里，我尝试在脚本中创建一个const数据（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>

它从空事件数组循环过滤的项目。

由于我的const数据太多了。我尝试创建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>

从这里开始，我只知道如何通过胡子调用特定数据。我不能使用const数据时使用的过滤器。

Answer 1

如果我正确理解了这个问题，您可以通过computed properties从后端过滤数据。

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

在您的模板中，您可以迭代这个新属性

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