Daten mit einer Suchanfrage filtern? Wordpress JSON-Objekt + VueJS2

Question

EDIT: Live-Code-Editor hinzugefügt: https://ide.c9.io/dosstx/wordpress

Ich versuche, ein Wordpress-JSON-Datenobjekt mit VueJS2 und dem Wordpress-REST-API zu filtern (Ich habe einen benutzerdefinierten Post-Typen in meinem realen Welt Beispiel).

Ich habe Probleme mit der Verkabelung und die Tabelle zu filtern, basierend auf den Suchbegriffen, die in das Suchfeld eingegeben werden.

Ohne die Suchfunktion funktioniert alles gut, aber sobald ich versuche, mit einem Suchbegriff zu filtern, passiert nichts - kein Fehler in der Konsole.

Ich habe meine Vue Beispiel wie folgt:

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; 
       }); 
     } 
}); 

Mein HTML:

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

Und weiter unten meine HTML ....:

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

Alle Hinweise auf wie zu beheben wäre sehr geschätzt.

Answer 1

Sie verwenden die Methode filter nicht korrekt.

Vom MDN Docs for the filter method:

filter() ruft eine Rückruffunktion vorgesehen einmal für jedes Element in einem Array, und erstellt ein neues Array aller Werte, für die Callback-Wert zurückgibt, der zu true nötigt.

Der Rückruf an filter geben soll einen Boolean Wert zurück, um zu bestimmen, ob das Element des Feldes in der gefilterten Reihe aufzunehmen.

In Ihrem Fall gehe ich davon aus, dass Ihre post Objekte eine Eigenschaft (z. B. content) haben, die Sie durchsuchen möchten und dass Sie nur Beiträge mit Inhalten einschließen möchten, die den Suchbegriff enthalten. So können Sie etwas tun:

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