Vue v-for遍历computed筛选结果时无法正常显示列表数据的问题

v-for 仅支持遍历数组、Map、Set等可迭代值，你实现的filterLivingNames计算属性逻辑存在核心错误：循环找到第一个匹配条件的住宿条目时，直接返回了单个对象而非所有匹配结果组成的数组，导致v-for遍历行为不符合预期——此时遍历会把单个对象的属性挨个拆解，live拿到的是Id、Name这类属性的原始值（比如字符串、数字），自然无法读取live.Name字段渲染内容，这也是控制台能打印出匹配数据但页面显示异常的直接原因。

另外代码还存在两个隐性问题：

• 未在组件实例中声明联动选择用到的city、area响应式变量，会导致选择值变化时计算属性无法正常触发更新
• v-for绑定的key使用了遍历索引，后续列表更新时容易出现渲染错位问题

1. 修正计算属性筛选逻辑 #

把原来找到匹配项就直接返回单个对象的逻辑，改为收集所有匹配项到数组后统一返回，无匹配时返回空数组，保证v-for始终接收到可遍历的数组类型值：

import LivingData from '@/assets/LivingData.json';

export default {
    data() {
        return {
            // 声明联动选择的响应式变量，和城市、区域选择器做双向绑定
            city: '',
            area: ''
        }
    },
    computed: {
        livedata(){
            return LivingData;
        },
        filterLivingNames(){
            const result = []
            const total = this.livedata.length
            for(let i = 0; i < total; i++){
                const item = this.livedata[i]
                if(item.Region === this.city && item.Town === this.area){
                    console.log(item)
                    result.push(item)
                }
            }
            return result
        }
    }
}

如果想简化写法，也可以直接用数组原生filter方法实现相同逻辑：

filterLivingNames(){
    return this.livedata.filter(item => {
        return item.Region === this.city && item.Town === this.area
    })
}

2. 优化模板渲染逻辑 #

替换key绑定规则，增加无数据时的兜底提示：

<!-- 无匹配数据时显示提示 -->
<div v-if="filterLivingNames.length === 0" class="list-group-item text-center text-muted">
    当前所选区域暂无住宿信息
</div>
<!-- 有匹配数据时遍历渲染列表 -->
<a 
    v-else
    href="#" 
    class="list-group-item" 
    v-for="live of filterLivingNames" 
    :key="live.Id"
>
    <h3 class="text-center">{{live.Name}}</h3>
    <p>Address：{{live.Address || '暂未录入'}}</p>
    <p>Phone：{{live.Phone || '暂未录入'}}</p>
</a>

注意：你提供的LivingData.json示例中每个住宿条目目前只有Id、Name、Region、Town四个字段，没有Address、Phone字段，渲染时如果直接读这两个字段会显示undefined，建议后续补全数据源，或像示例代码一样加兜底文案。

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