Vue页面刷新后API加载的通知数据控制台可见但视图不显示如何解决

• 核心问题来自vue-perfect-scrollbar上绑定的v-once指令：该指令会让当前节点及其所有子内容只执行一次性渲染，后续无论响应式数据如何变更，该区域都不会再触发重渲染。
• 组件初始挂载时，notifications为空数组，此时带v-once的滚动容器会把"空列表"的初始状态永久固定；后续接口返回数据、向数组中推送通知内容时，这块被锁死的区域不会响应数据更新，自然无法渲染通知列表。
• "通知总长度能正常显示"的现象刚好匹配这个逻辑：展示长度值的<b-badge>属于头部DOM区域，完全不在v-once的作用范围内，不受一次性渲染的限制，所以能正常拿到更新后的数组长度。

• 核对接口返回的通知数据结构：模板中取值路径为notification.data.message、notification.created_at，需要确认返回对象的层级结构是否和取值路径完全匹配，避免字段路径错误导致的内容渲染为空的次生问题。
• 当前接口请求的代码存在两处可优化的细节：
  • 逐次循环push数组的写法可以简化，直接对数组整体赋值即可，Vue对数组的整体赋值是原生支持响应式监听的，示例：

    getNotifications() {
        axios.get(apiHost + '/notification')
            .then((response) => {
                this.notifications = response.data
                console.log(this.notifications)
            })
            .catch(error => {
                console.log(error);
            })
    }
    

  • 错误回调的参数存在拼写错误：当前写的是resonse，实际应为error，否则后续捕获接口错误时无法正常拿到错误对象。

1. 移除vue-perfect-scrollbar标签上的v-once属性，这步操作即可解决列表不渲染的核心问题。
2. 逐一核对通知字段的取值路径，确保和接口返回的对象结构一致。
3. 简化数据赋值逻辑，修正错误回调的参数拼写问题。

内容的提问来源于stack exchange，提问作者Meriem El atri