秃头老刘 2023-03-10 10:58 采纳率: 100%
浏览 93
已结题

vue keep-alive里多个页面复用组件,数据更新无法更新视图

请教一个问题
当改变了企业名称以后,重新获取数据无法渲染到页面

数据是直接在子组件调取接口获取的,然后打印出来没有问题,也是直接在子组件显示的,本地存储给父组件只是为了其他接口使用,现在问题是子组件自己的显示和数据层里的数据不一致,比如我打印this.selectCompany.name是123,但是子组件的上面显示的是456,以下代码都是子组件里的template和script

以上的数据获取和显示都在子组件自己内部

img


**红框里是子组件的显示区域,下面打印出来的是子组件data的值,目前就是子组件data的值和显示对不上,上面打开的tag都引入了这个子组件,并且都用了keep-alive缓存
**

这是子组件的上半部分代码,后面省略了一部份不重要的

<template>
  <div class="content">
    <div class="company">
      <div class="companyname">
       
        <img
          alt=""
          class="logo-img"
          :src="selectCompany.Logo"
          v-show="selectCompany.Logo"
        />
        <span>{{ selectCompany.Name }}</span>
      </div>


这里是获取数据的地方,打印出来的值已经改变了,但是页面数据没有改变


  //更新数据
    updateItem(res, selectCompany) {
      //目前只有activated传key,代表当前选中不在第一页
      let updateItem = null;
      if (!selectCompany || selectCompany === "undefined") {
        return;
      }
      res.data.Data.data.forEach(item => {
        if (item.Id !== JSON.parse(selectCompany).Id) {
          return;
        }
        updateItem = item;
      });

      if (updateItem) {
        this.$nextTick(() => {
          this.selectCompany = updateItem;
          this.$set(this.selectCompany, "Name", updateItem.Name);
          this.$forceUpdate()
          console.log(this.selectCompany);
        });
        localStorage.setItem("selectCompany", JSON.stringify(updateItem));
      }
    },

这是打印的结果

img

我看到在浏览器的vue插件里,这个值也没有改变

img

目前已经试过router-view加上key值,父子组件都使用强制更新,子组件内部加上v-if,然后$set,nexttick,强制更新,都不行

  • 写回答

5条回答 默认 最新

  • 「已注销」 2023-03-10 11:09
    关注

    参考GPT和自己的思路:可能是因为selectCompany是在keep-alive缓存中的组件中进行了更改,而不是在新创建的组件中进行更改。这样就无法触发组件的重新渲染。你可以尝试在activated生命周期钩子中手动更新数据,这样每次从缓存中激活组件时都会触发更新。

    例如,你可以添加以下代码来更新数据:

    export default {
      activated() {
        // 从localStorage中获取最新的选中企业信息
        const selectCompany = JSON.parse(localStorage.getItem("selectCompany"));
        // 如果选中的企业信息与当前缓存中的不同,则更新数据
        if (selectCompany && selectCompany.Id !== this.selectCompany.Id) {
          this.selectCompany = selectCompany;
        }
      },
      // ...
    }
    

    这里,我们在activated钩子中检查选中的企业信息是否与当前缓存中的相同。如果不同,就更新selectCompany的值。这样,每次从缓存中激活组件时,都会触发数据的更新和重新渲染。

    另外,不建议在组件中使用$forceUpdate和$nextTick,因为这样可能会导致代码更加复杂,难以维护。如果需要更新数据,请使用Vue的响应式数据机制,或者手动调用组件的$forceUpdate方法来触发重新渲染。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 3月21日
  • 已采纳回答 3月13日
  • 修改了问题 3月10日
  • 修改了问题 3月10日
  • 展开全部

悬赏问题

  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上
  • ¥15 IPQ5018制作烧录固件,boot运行失败(操作系统-linux)(相关搜索:操作系统)(相关搜索:操作系统)