Suche Filterung mit Vue2

Question

Bitte beachten Sie die Kommentare im obigen Code für eine Erklärung dessen, was in meinem Code passiert.

Ich verstehe nicht, warum mein Code oben nicht funktioniert. Ich versuche, Suchfunktionalität für jede Facette zu implementieren. Bei der Suche sollte die Filterung nur für FacetItems erfolgen, die zu dieser bestimmten Facette gehören.

Ich konnte überprüfen, dass displayFacetItems ein Array von gefilterten FacetItems zurückgibt, aber aus irgendeinem Grund wird das gefilterte Array im DOM nicht aktualisiert.

Dies könnte etwas mit der Datenbindung von Vue oder dem Prozess zu tun haben, in dem Vue das DOM aktualisiert. Irgendwelche Hinweise darauf, was ich falsch mache, werden sehr geschätzt.

Mein Code fand seine Inspiration aus diesem Artikel:

https://nickescobedo.com/1018/introduction-to-vue-js-filtering-with-lodash

Answer 1

Die param facetsIndex nicht reaktiv ist, bitte einen Blick auf Ihre jsconsole nehmen, sollten Sie eine Warnung über diese haben und nicht nur diese, Ihren Code Logik ist völlig falsch.

• Sie ein V-Modell bei der Eingabe verwenden könnten,
• erstellen filteredFacets Eigenschaft, diese Eigenschaft
• Verwendung in der Schleife.

Nur ein Beispiel, sollten Sie mehr darüber lesen, wie VueJS funktioniert: https://vuejs.org/v2/guide/

Answer 2

Sie können meine jsfiddle für Suchbegriffe auf Vuejs sehen. Ich hoffe, dies wird dir helfen.

<div id="app"> 
    <label> 
     Search name: <input type="text" v-model='searchString'> 
    </label> <br> 
    <transition-group tag='ul' name='my-list'> 
     <li v-for='item in filteredList' :key='item.id' class="my-list-item"> 
      {{item.name}} 
     </li> 
    </transition-group> 
</div> 
<script> 
    const app = new Vue({ 
    el: '#app', 
    beforeMount() { 
     const req = fetch('https://jsonplaceholder.typicode.com/users'); 
     req.then(response => { 
      if (response.ok) { 
       return response.json(); 
      } 
      throw new Error('Bad request: ' + response.status); 
     }) 
     .then(users => { 
      this.users = users; 
      this.nextId = this.users.length + 1; 
     }); 
    }, 
    data: { 
     searchString: '', 
     users: [ 
     {id: 1, name: 'Alex'}, 
     {id: 2, name: 'Bob'}, 
     {id: 3, name: 'Sandy'}, 
     ], 
    }, 
    computed: { 
     filteredList: function() { 
      const searchString = this.searchString.toLowerCase(); 
      return this.users.filter(item => item.name.toLowerCase().includes(searchString)); 
     } 
    } 
}); 
</script>