使用 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>

从这里开始，我只知道如何通过mustache来调用具体的数据。我无法执行使用 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 从数据库中过滤数据

Filter data from database using v-for

vuejs2

laravel-5.4