VueJS2表：如何添加一个过滤器

我想用下面的link这样的东西来使用axios在vue中填充表格。VueJS2表：如何添加一个过滤器

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

是否有另一个指令可以与axios一起使用？
如果我有一个来自休息api的结构json，我如何使用像vue2-bootstrap-table2这样的东西并通过解析json来添加值？

来源

2017-10-05 veggirice

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 implements the filter

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

与远程数据使用VueBootstrapTable，你不必爱可信直接，因为部分已经使用它的引擎盖下。但是，您需要通过添加这对您的data属性来配置它来获取远程数据

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

然后引用了ajax的配置在您的组件声明像

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

来源

2017-10-05 13:52:59 kharhys

VueJS2表：如何添加一个过滤器

回答

相关问题