Vue.js 在keyup上筛选数组结果

我有一个名称数组，我使用

v-for

循环，当用户开始在搜索框中键入时，我试图过滤这些结果

我在下面添加了代码以供参考，如果我以

v-for=“entry in entries”

的方式执行循环，那么它将输出数组，但不使用computed and filteredList函数

条目



{{entry.name}


从“@/components/add entry.vue”导入addEntry
导出默认值{
名称：'条目列表'，
搜索：“”，
组成部分：{
补遗
},
数据：函数（）{
返回{
参赛作品：[
{
名字：“保罗”
}, 
{
名字：“巴里”
},
{
名字：“克雷格”
},
{
名字：“佐伊”
}
]
}
},
计算：{
过滤器列表（）{
返回this.entries.filter（条目=>{
return entry.name.toLowerCase（）.includes（this.search.toLowerCase（））
})   
}
}
}

尝试将搜索属性移到数据选项，如下所示：

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

另外，如果搜索道具为空，则添加检查以返回完整条目列表