Question

在这里，我尝试在脚本（vue js）中制作const数据。

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>

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

1 个答案: