在 keyup 上过滤数组结果

Posted 2023-02-23

【中文标题】在 keyup 上过滤数组结果

【英文标题】：Filter array results on keyup

【发布时间】：2019-01-28 09:04:58

【问题描述】：

我有一组名称，我使用v-for 循环遍历我正在尝试在用户开始在搜索框中输入时过滤这些结果。

如果我将循环设置为v-for="entry in entries"，我在下面添加了我的代码以供参考，那么它会输出数组，但不适用于计算和过滤列表函数

<template>
    <div class="container-flex">
        <div class="entries">

            <div class="entries__header">
                <div class="entries__header__title">
                    <p>Entries</p>
                </div>

                <div class="entries__header__search">
                    <input 
                        type="text" 
                        name="Search" 
                        class="input input--search" 
                        placeholder="Search..." 
                        v-model="search">
                </div>
            </div>

            <div class="entries__content">
                <ul class="entries__content__list">
                    <li v-for="entry in filteredList">
                         entry.name 
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>

<script>

import addEntry from '@/components/add-entry.vue'

export default 
    name: 'entry-list',
    search: '',
    components: 
        addEntry
    ,
    data: function() 

        return 
            entries: [
            
                name: 'Paul'
            , 
            
                name: 'Barry'
            ,
            
                name: 'Craig'
            ,
            
                name: 'Zoe'
            
            ]
        
    ,
    computed: 
        filteredList() 
            return this.entries.filter(entry => 
                return entry.name.toLowerCase().includes(this.search.toLowerCase())
            )   
        
    

【参考方案1】：

尝试将 search 属性移动到数据选项中，如下所示：

export default 
    name: 'entry-list',
    components: 
        addEntry
    ,
    data: function() 

        return 
            search: '',
            entries: [
            
                name: 'Paul'
            , 
            
                name: 'Barry'
            ,
            
                name: 'Craig'
            ,
            
                name: 'Zoe'
            
            ]
        
    ,
    computed: 
        filteredList() 
            if(this.search === '') return this.entries
            return this.entries.filter(entry => 
                return entry.name.toLowerCase().includes(this.search.toLowerCase())
            )   
        
    

还添加检查搜索属性是否为空以返回完整条目列表。

Demo fiddle