vue中实现“模糊搜索”

<template>
    <div>
        <div>
            <el-input v-model="searchInputValue" style="margin: 0 auto; width: 80%;"></el-input>
            <div v-for="(n,i) in searchData" :key="i">
                <div>{{n.name}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                searchInputValue: '',
                dailyLeftTypeList:[
                    {
                        name:'水果'
                    },
                    {
                        name:'蔬菜'
                    },
                    {
                        name:'肉类'
                    },
                    {
                        name:'水产'
                    },
                    {
                        name:'干果'
                    },
                    {
                        name:'调料'
                    },
                    {
                        name:'干货'
                    },
                    {
                        name:'糕点'
                    },
                    {
                        name:'熟食'
                    }
                ]
            };
        },
        computed:{
            searchData(){
                let searchInputValue = this.searchInputValue;
                //如果存在，根据条件过滤
                if(searchInputValue){
                    return this.dailyLeftTypeList.filter(function (daily) {
                        return Object.keys(daily).some(function (key) {
                            return String(daily[key]).toLowerCase().indexOf(searchInputValue)>-1;
                        })
                    })
                }
                //如果不存在，整体返回
                return this.dailyLeftTypeList;
            }
        }
    };
</script>