使用搜索查询过滤数据？(Filter data using a search query? Wordpress JSON object + VueJS2)

使用搜索查询过滤数据？(Filter data using a search query? Wordpress JSON object + VueJS2)

编辑：添加了实时代码编辑器： https ： //ide.c9.io/dosstx/wordpress

我正在尝试使用VueJS2和Wordpress REST API过滤Wordpress JSON数据对象（我的真实世界示例中有自定义帖子类型）。

我遇到了布线问题，并根据搜索框中输入的搜索条件对表进行过滤。

没有搜索功能，一切正常，但一旦我尝试使用searchterm进行过滤，没有任何反应 - 控制台中没有错误。

我有我的Vue实例：

var vm = new Vue({ el: '#app', data: { searchTerm: '', posts: [] }, computed: { filteredItems: function(){ return this.posts.filter(function(post) { return this.post.searchTerm; //i believe this line is the culprit }); } }, created: function(){ $.get('mylocalhost/wp-json/wp/v2/products/' + '?_embed=true') .done(function(data) { vm.posts = data; }); } });

我的HTML：

<div id="app"> <form> <input type="text" v-model="searchTerm"> </form>

并进一步下载我的HTML ....：

<tr v-for="post in filteredItems"> <td>{{post.title.rendered}}</td> ...snip ... </div>

任何有关如何修复的线索将不胜感激。

EDIT: Live Code Editor added: https://ide.c9.io/dosstx/wordpress

I am trying to filter a Wordpress JSON data object using VueJS2 and the Wordpress REST API (I have a custom post type in my real world example).

I'm having trouble with the wiring and getting the table to filter based on the search terms that are typed into the search box.

Without the search function, everything works fine, but once I try to filter using a searchterm, nothing happens -- no error in console.

I have my Vue instance like so:

var vm = new Vue({ el: '#app', data: { searchTerm: '', posts: [] }, computed: { filteredItems: function(){ return this.posts.filter(function(post) { return this.post.searchTerm; //i believe this line is the culprit }); } }, created: function(){ $.get('mylocalhost/wp-json/wp/v2/products/' + '?_embed=true') .done(function(data) { vm.posts = data; }); } });

My HTML:

<div id="app"> <form> <input type="text" v-model="searchTerm"> </form>

And further down my HTML....:

<tr v-for="post in filteredItems"> <td>{{post.title.rendered}}</td> ...snip ... </div>

Any clues on how to fix would be greatly appreciated.

最满意答案

您没有正确使用filter方法。

从MDN Docs中获取filter方法 ：

filter()为数组中的每个元素调用一次提供的回调函数，并构造一个包含所有值的新数组，其中回调返回一个强制为true的值。

传递给filter的回调应返回一个Boolean值，以确定是否在过滤后的数组中包含该数组的元素。

在您的情况下，我假设您的post对象有一些您想要搜索的属性（比如content ），并且您希望仅包含包含搜索词的内容的帖子。 所以你可以这样做：

computed: { filteredItems: function() { return this.posts.filter(function(post) { return post.content.indexOf(this.searchTerm) != -1; }); } },

You aren't using the filter method correctly.

From the MDN Docs for the filter method:

filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true.

The callback passed to filter should return a Boolean value to determine whether or not to include the element of the array in the filtered array.

In your case, I'm assuming your post objects have some property (say content) you want to search and that you want to only include posts with content that contain the search term. So you can do something like this:

computed: { filteredItems: function() { return this.posts.filter(function(post) { return post.content.indexOf(this.searchTerm) != -1; }); } },