VueJS2表:如何添加筛选器

Question

我试图使用下面的链接来使用axios在vue中填充一个表。

如何添加筛选器和搜索栏？我似乎无法添加v-for="post in posts | filterBy search。其中搜索是<input>的v模型。我看到了一些文档，说明这在vuejs2中是不可用的。除了v-for指令之外，我还可以在<table>标记中使用哪些其他指令来支持vuejs2中的filterBy？

• 我是否还可以使用axios的另一个指令？
• 如果我有一个来自rest的结构json，我如何使用像Vue2-引导-表2这样的东西并通过解析json来增加值呢？

Answer 1

v-for是应该用来显示多个项的指令。还请注意，您打算用于筛选的search被vue.js视为data，每当此类数据更改时，vue.js将触发响应。

您可以使用computed属性，该属性一旦搜索查询发生更改就会得到更新。

computed: {
    filteredList: function () {
      return this.list.filter(function(){ 
        //select only what matches filter
      });
    }
  }

或者，例如，如果从异步函数调用(例如远程api )获得筛选列表，则vue.js提供属性watchers。事实上，这正是VueBootstrapTable实现了过滤器

watch : {
  filterKey: function () {
    // filter was updated, so resetting to page 1
    this.page = 1;
    this.processFilter();
  },
  ...
}

要在远程数据中使用VueBootstrapTable，不需要直接使用axios，因为组件已经在幕后使用了它。但是，需要将其配置为获取远程数据，方法是将其添加到data属性中。

ajax: {
  enabled: true,
  url: "http://localhost:9430/data/test",
  method: "GET",
  delegate: false,
  axiosConfig: {}
},

然后在组件声明中引用ajax配置，如下所示

<vue-bootstrap-table :ajax="ajax" ....