vue组件值变化但不刷新问题怎么解决

今天分享文章“vue组件变化但不刷新问题怎么解决”,主要从:组件值变化但不刷新强制组件刷新、bug复现、解决等几个方面为大家介绍,希望能帮到您。

vue组件值变化但不刷新问题怎么解决

组件值变化但不刷新强制组件刷新

在调用组件的时候,如果数据中只是某个属性变化(比如id)变化,在vue开发工具中看到变量值变化,但是组件上的数据就是不刷新

bug复现

引用组件

<bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" />

sNode数据结构

{    "id": "gun2m2c4",    "label": "子弹4",    "type": "cBomb",    "data": {        "angle": 50,        "mwr": {            "checked": false,            "band": 50,            "dbi": 50        },        "slr": {            "checked": false,            "length": 50,            "power": 50,            "facula": 50,            "size": 50        },        "irDetector": {            "checked": false,            "band": 50,            "dbi": 50        },        "mwd": {            "checked": false,            "band": 50,            "direction": 50,            "angle": 50        }    }}

当鼠标点击切换子弹过快时,会出现子组件不刷新的情况

解决

先看值有没有return出去!如果没有return,子组件也是不响应的,watchEffect甚至监听不到

我们将提供一个key属性,以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变,则不会更改组件,但是如果key发生更改,Vue 就会知道应该删除旧组件并创建新组件。

我们可以将key分配给子组件,想重新渲染组件时,更新该key即可。这应该是强制Vue重新渲染组件的最佳方法

具体一点

把子弹的id当做key给组件,当作为key的id发生变化时,Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件,它将重新初始化自身并“重置”其状态。

<bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" :key="sNode.id" />

强制刷新vue组件

例如我有一个表格,每次点击其中的一行弹出一个窗口,展示对应的信息,弹窗如下

<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" top="0">   <UserPage v-if="isShow" :userid="userid"/></el-dialog>

可见弹窗里面加载的其实是一个组件,组件通过判断当前点击行的id来进行不同数据的渲染

问题

发现,其实每次弹窗出来的数据都是第一次加载的数据,原因是根本没有重新加载,而只是将dialog里面的组件进行展示和隐藏而已

解决 &ndash; 强制刷新组件

给点击时间里面加上强制刷新组件的代码,如下

//methods中方法handleCreate(row) {  this.isShow = false//销毁组件  this.$nextTick(() => {      this.isShow = true//重建组件  })  //控制dialog的显示  this.dialogStatus = 'create'  this.dialogFormVisible = true  //传参  this.userid = row.approvalId.toString()}

本文有关“vue组件值变化但不刷新问题怎么解决”的介绍就到这里,如果您已经掌握上述知识,那就赶紧行动实操一下!如果还需要了解更多“vue组件值变化但不刷新问题怎么解决”相关内容,可点击进入Worktile网站相关频道,进行搜索与查询。

文章标题:vue组件值变化但不刷新问题怎么解决,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/15132

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年6月29日 下午11:35
下一篇 2022年6月29日 下午11:49

相关推荐

  • php类中的rewind方法如何用

    在php中,rewind()函数方法用于将文件指针的位置倒回文件的开头,若指针的位置倒回成功,则该函数返回的结果是true,如果指针的位置倒回不成功,则该函数的返回结果是false,语法为“rewind(规定已打开的文件)”。 本文操作环境:Windows10系统、PHP8.1版、Dell G3电脑…

    2022年6月27日
    600
  • git如何删除某个分支

    git删除某个分支的方法:1、利用“git branch –delete dev”命令删除本地分支;2、利用“git push origin –delete branch”命令删除远程分支;3、利用“git branch –delete –remote…

    2022年6月29日
    21800
  • win11新建不了文本文档怎么解决

    在以往文章中,也有不少关于“win11新建不了文本文档怎么解决”的介绍,但内容并不是十分详尽。以下是小编最新整理的“win11新建不了文本文档怎么解决”相关知识,不仅内容详细,而且步骤、细节清晰,希望能够帮助大家解决一些工作中的疑惑。 方法一: 1、首先点开下面的“开始菜单” 2、在上方搜索看看能不…

    2022年6月27日
    3300
  • 销售管理软件

    销售管理软件顾名思义就是专门管理销售人员的软件,这种管理软件在企业中是比较流行的,通过线索的精细化管理、客户分级分层管理、标准化销售流程管理,商机管理,产品价格、促销返利、订单管理、销售预测与数据分析等功能,实现线索到现金的完整业绩闭环,提升销售工作效能,驱动业绩增长,提升客户满意度。 现在无论什么…

    2022年3月24日
    14100
  • Redis+AOP怎么自定义注解实现限流

    今天分享文章“Redis+AOP怎么自定义注解实现限流”,主要从:下载、解压、准备编译、编译等几个方面为大家介绍,希望能帮到您。 下载 1,下载页面 2,下载 解压 tar -xzvf redis-5.0.7.tar.gz 准备编译 1, 请在操作前确认gcc是否已安装,gcc -v 如未安装,可以…

    2022年6月29日
    1000
  • 知识库是什么

    知识库是关于产品、服务、部门或主题的自助式在线信息库。为了让大家更好的了解知识库是什么这个问题,下面我们将会围绕:1、企业知识库是什么;2、企业为什么需要知识库;3、知识库的好处有哪些;三点进行展开。 知识库中的数据可以来自任何地方。通常,精通相关主题的贡献者会给知识库增加或扩展内容。内容可以是从你…

    2022年3月18日
    8800
  • 创业公司为何要进行人员培训?

    本文来自Worktile 运营国际事业部新晋小鲜肉 @邵智康的激情分享,其独到而又不失水准的看法如一股清流洒向人间如果你正囿于人员培训的问题,那就千万走过路过不要错过啦 在企业发展的巨流河里,无论商业环境如何发展与变迁,行业竞争如何残酷而激烈,对于无数大大小小的企业来说,他们在许多年的浮浮沉沉中也许…

    2022年3月20日
    11400
  • 知识库软件有哪些

    这里整理了国内外最好用的10款知识库软件,适用对象从团队到个人,他们分别是:1、PingCode Wiki;2、Baklib;3、有道云笔记;4、印象笔记;5、RemNote;6、石墨文档;7、Notion;8、语雀;9、幕布;10、Obsidian。具体功能我们将在文章中介绍。 一、团队知识库软件…

    2022年3月18日
    69600
  • git如何删除submodule

    git删除submodule的方法:1、利用“vim .gitmodules”删除Submodule对应的文件;2、利用“vim .git/config”更改git配置文件中的信息,删除掉submodule相关内容;3、将modules目录下的submoudle删除即可。 git删除submodul…

    2022年6月27日
    28300
  • 内核和linux系统的区别有哪些

    linux内核和linux系统的区别:1、linux操作系统是包含linux内核的,是将linux内核进行扩展,而linux内核只提供了硬件抽象层、硬盘以及文件系统控制的核心程序;2、linux系统会在内核的基础上加入了用户界面和各种软件的支持,而linux内核则没有用户界面和软件的支持。

    2022年6月29日
    2900
联系我们
关注微信
关注微信
分享本页
返回顶部