使用Vue2进行搜索过滤

Question

    <!-- Facets in the v-for below is an array of objects, each element (facet) in the
    facets array has a property which is an array of facetItems. -->

    <div class="row" v-for="(facet, facetsIndex) in facets" :key="facetsIndex">

      <!-- Since we are inside the v-for, it creates a search input for each facet.
      Each facet search input will only search for facetItems belonging to that facet.
      We know which facet to search in because we pass the facetIndex to the searchFilter function. -->

      <input type="text" @keyup="searchFilter(facetsIndex)">

      <div v-if="facet.facetItems.length > 0">
        <div class="facet-header">{{config[core.toLowerCase()].displayNames[facet.facetName]}}</div>
        <div class="row facet-scroll" >

          <!-- The v-for below is used to iterate over the facetItems for each facet. displayFacetItems() is called
          for each array of facetItems corresponding to each facet on initial render. displayFacetItems() is also called
          on each keyup event emitting from the corresponding facet search input. displayFacetItems() should return an
          array of facetItems objects, and when a search input is entered, it should return a filtererd array of facetItems
          based on the search results. -->

          <div  class="facet-item" v-for="(item, facetItemIndex) in displayFacetItems(facetsIndex)" :key="facetItemIndex">
            <facet v-bind:item="item"  v-bind:facet="facet"></facet>
          </div>

        </div>
        <hr class="divider"/>
      </div>
    </div>

    methods: {
      searchFilter (facetsIndex) {
        let searchTerm = event.currentTarget.value
        this.displayFacetItems(facetsIndex, searchTerm)
      },
      displayFacetItems (facetsIndex, searchTerm) {
        if (!searchTerm) return this.facets[facetsIndex].facetItems
        return this.facets[facetsIndex].facetItems.filter((facetItem) => {
          return _.includes(facetItem.name.toLowerCase(), searchTerm.toLowerCase())
        })
      }
    },

请参阅上面代码中的注释，以了解我的代码中发生了什么。

我不明白为什么我上面的代码不能工作。我正在尝试为每个方面实现搜索功能。在搜索时，应该只对属于该特定方面的facetItems进行过滤。

我已经能够验证displayFacetItems确实返回了一个经过过滤的facetItems数组，但是由于某些原因，这个经过过滤的数组没有在DOM中更新。

这可能与Vue的数据绑定或Vue更新DOM的过程有关。如果有人指出我做错了什么，我将不胜感激。

我的代码灵感来源于这篇文章：

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

Answer 1

参数facetsIndex不是反应式的，请看看你的jsconsole，你应该对此有一个警告，不仅如此，你的代码逻辑是完全错误的。

你可以在输入上使用v-

• ，

• 创建一个filteredFacets属性，

• 在你的循环中使用这个属性。

这只是一个例子，您应该阅读更多关于VueJS如何工作的内容：https://vuejs.org/v2/guide/

Answer 2

你可以在Vuejs上看到我的搜索项目的jsfiddle。我希望这能对你有所帮助。

<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>