使用 Vue2 进行搜索过滤 [英] Search Filtering with Vue2

问题描述

 <!-- 下面v-for中的facets是一个对象数组，里面的每个元素(facet)facets 数组有一个属性，它是一个 facetItem 数组.--><div class="row" v-for="(facet, facetsIndex) in facets" :key="facetsIndex"><!-- 由于我们在 v-for 中，它为每个方面创建一个搜索输入.每个构面搜索输入将只搜索属于该构面的构面项.我们知道要搜索哪个方面，因为我们将 facetIndex 传递给 searchFilter 函数.--><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" ><!-- 下面的 v-for 用于迭代每个 facet 的 facetItems.displayFacetItems() 被调用对于与初始渲染中的每个方面相对应的每个方面的数组.displayFacetItems() 也称为在从相应的构面搜索输入发出的每个 keyup 事件上.displayFacetItems() 应该返回一个facetItems 对象数组，当输入搜索输入时，它应该返回一个 filtererd 的 facetItems 数组根据搜索结果.--><div class="facet-item" v-for="(item, facetItemIndex) in displayFacetItems(facetsIndex)" :key="facetItemIndex"><facet v-bind:item="item" v-bind:facet="facet"></facet>

<hr class="divider"/>

方法: {搜索过滤器(facetsIndex){让 searchTerm = event.currentTarget.valuethis.displayFacetItems(facetsIndex, searchTerm)},displayFacetItems (facetsIndex, searchTerm) {if (!searchTerm) 返回 this.facets[facetsIndex].facetItems返回 this.facets[facetsIndex].facetItems.filter((facetItem) => {返回 _.includes(facetItem.name.toLowerCase(), searchTerm.toLowerCase())})}},

请参阅上面代码中的注释，以了解我的代码中发生的情况.

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

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

这可能与 Vue 的数据绑定或 Vue 更新 DOM 的过程有关.任何关于我做错了什么的指示都非常感谢.

我的代码从这篇文章中获得灵感:

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

解决方案

你可以看到我的jsfiddle 用于 Vuejs 上的搜索项.我希望这会帮助你.

<标签>搜索名称:<br><transition-group tag='ul' name='my-list'><li v-for='item in filtersList' :key='item.id' class="my-list-item">{{项目名称}}</transition-group>
<脚本>const app = new Vue({el: '#app',beforeMount() {const req = fetch('https://jsonplaceholder.typicode.com/users');req.then(响应 => {如果(响应.确定){返回 response.json();}throw new Error('错误请求:' + response.status);}).then(用户 => {this.users = 用户；this.nextId = this.users.length + 1;});},数据: {搜索字符串:'',用户: [{id: 1, name: 'Alex'},{id: 2, name: 'Bob'},{id: 3, name: '桑迪'},],},计算:{过滤列表:函数(){const searchString = this.searchString.toLowerCase();返回 this.users.filter(item => item.name.toLowerCase().includes(searchString));}}});

    <!-- 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())
        })
      }
    },

Please see the comments in the code above for an explanation of what's happening in my code.

I don't understand why my code above isn't working. I'm trying to implement search functionality for each facet. When searching, the filtering should only happen for facetItems belonging to that specific facet.

I've been able to verify that displayFacetItems does return an array of filtered facetItems but for some reason the filtered array isn't updated in the DOM.

This might have something to do with Vue's data binding or the process in which Vue updates the DOM. Any pointers on what I'm doing wrong is greatly appreciated.

My code took inspiration from this article:

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

解决方案

You can see my jsfiddle for search items on Vuejs. I hope this will help you.

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

这篇关于使用 Vue2 进行搜索过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！