Question

编辑：添加了实时代码编辑器：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>

非常感谢任何有关如何修复的线索。

Answer 1

您没有正确使用filter方法。

来自MDN Docs for the filter method：

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

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

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

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

使用搜索查询过滤数据？ Wordpress JSON对象+ VueJS2

1 个答案: