Vue输入过滤对象数组无结果显示问题排查求助

我帮你梳理出了几个导致过滤功能失效的核心问题，逐个解决就能正常工作了：

1. Vue实例从未获取到后端传递的groupResult数据 #

你的Laravel控制器已经把分类数据传到Blade视图了，但Vue里的results数组一直是空的——因为你没把Blade中的$groupResult数据传递给Vue实例！

修复方法：
把后端数据转成JSON格式传给Vue，有两种简单方式：

方式一：通过props传递（更符合Vue组件规范） #

修改Blade代码：

<div id="categoryNames" :initial-results='@json($groupResult)'> 
    <input type="text" v-model="keywords"> 
    <ul v-if="filteredResults.length > 0"> 
        <li v-for="result in filteredResults" :key="result.group_code" v-text="result.group_name"></li> 
    </ul> 
</div>

修改Vue实例代码：

var categoryNames = new Vue({ 
    props: ['initialResults'],
    data() { 
        return { 
            keywords: '', // 把null改成空字符串更符合输入框行为
            results: [] 
        }; 
    },
    mounted() {
        // 组件挂载时将初始数据赋值给results
        this.results = this.initialResults;
    },
    computed: { 
        filteredResults () { 
            // 注意字段名要对应group_name，不是name！
            return this.keywords 
                ? this.results.filter(row => row.group_name.search(new RegExp(`${this.keywords}`, 'i')) !== -1) 
                : this.results 
        } 
    } 
}).$mount('#categoryNames');

方式二：直接在Vue的data中初始化（更简洁） #

var categoryNames = new Vue({ 
    data() { 
        return { 
            keywords: '',
            results: @json($groupResult) // 直接把Blade变量转成JSON赋值
        }; 
    },
    computed: { 
        filteredResults () { 
            return this.keywords 
                ? this.results.filter(row => row.group_name.search(new RegExp(`${this.keywords}`, 'i')) !== -1) 
                : this.results 
        } 
    } 
}).$mount('#categoryNames');

2. 过滤逻辑中的字段名错误 #

你在过滤时使用了row.name，但后端传递的字段明明是group_name，这就导致永远匹配不到任何内容！必须把row.name改成row.group_name——上面的修复代码已经修正了这一点。

3. 额外的细节优化 #

• 原Blade中的v-if="results.length > 0"应该改成v-if="filteredResults.length > 0"，这样只会在过滤出结果时才显示列表，符合自动完成的预期。
• 把keywords的初始值从null改成空字符串''，避免空输入时的逻辑判断异常（null在布尔判断中会被视为false，而空字符串更符合输入框的初始状态）。

内容的提问来源于stack exchange，提问作者Geoff_S