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" 较好="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

相关推荐

  • coreldraw如何填充颜色

    coreldraw填充颜色的方法 1、打开软件选择左侧的矩形工具,在工作区域里画出一个矩形。 2、工具栏里面找到填充工具,选择均匀填充。 3、在均匀填充调色框中选择需要填充的颜色,然后点击“确定”。 4、这样就填充完成了。 关于“coreldraw如何填充颜色”的内容就介绍到这里了,感谢大家的阅读。…

    2022年9月26日
    20600
  • css如何实现平行四边形

    平行四边形 #parallelogram { width: 150px; height: 100px; transform: skew(20deg); background: red;} 以上是“css如何实现平行四边形”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对…

    2022年8月31日
    10800
  • php中有哪些字符串定界符

    php字符串定界符有两种:1、heredoc定界符,在“<<<”运算符之后要提供一个标识符,然后换行,接下来是字符串本身,最后要用前面定义的标识符作为结束标志。2、nowdoc定界符,在“<<<”运算符之后要提供一个被单引号括起来的标识符,然后换行,接下来是字符串…

    2022年9月26日
    31900
  • python怎么导出项目需要的库

    今天小编给大家分享一下python怎么导出项目需要的库的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 输入命令: pip freeze > requirements.txt 产生…

    2022年8月27日
    30900
  • windows 0xc000021a怎么手动修复

    0xc000021a手动修复方法: 方法一: 1、首先按下电脑的电源键,会重新启动电脑。 2、重复操作2-3次,会进入系统修复界面,选择“高级选项” 3、接着进入“疑难解答”,再选择进入其中的“高级选项” 4、然后在其中选择进入“命令提示符” 5、然后在命令提示符中依次分别输入“bootrec /f…

    2022年9月15日
    51000
  • SQL Server备份数据库的方法

    一.首先把当前的数据库备份成一个文件 1.按照操作来,选择对应的数据库, 确定备份文件的存储位置 点击确定,生成备份文件。 2.然后可以通过该备份文件还原数据库。 右键数据库点击还原文件和文件组 然后设置目标数据库的名字,如果数据库中已经存在相同名字的,则需要修改或者删除原来同名的数据库,然后在选择…

    2022年9月11日
    18500
  • 如何进行授权的APK渗透测试

    作为一个渗透测试小白,本文的目的是希望能为那些和我一样的小白提供一些测试思路。涉及的内容可能比较基础,表哥们见谅。APK 解包拿到 apk 之后直接用 7-Zip 解压可以得到几个文件夹、一个 AndroidManifest.xml 文件、一个dex文件。使用 dex2jar https://sou…

    2022年9月18日
    25600
  • windows浩辰cad看图王图形怎么填充颜色

    浩辰cad看图王图形填充颜色: 答:浩辰cad看图王没有图形填充功能。 1、浩辰cad看图王只能修改图纸的背景颜色。 2、通过修改背景颜色,可以让图纸的观感更加清晰。 3、只有在CAD本体软件中才能使用图形填充颜色。 4、下载安装完成后,打开软件,在下方命令中输入“H”,回车运行。 5、打开图案填充…

    2022年9月21日
    37000
  • 如何简单绕过人机身份验证Captcha

    今天分享的Writeup是作者在目标网站漏洞测试中发现的一种简单的人机身份验证(Captcha)绕过方法,利用Chrome开发者工具对目标网站登录页面进行了简单的元素编辑就实现了Captcha绕过。 人机身份验证(Captcha)通常会出现在网站的注册、登录和密码重置页面,以下是目标网站在登录页面中…

    2022年9月15日
    2.1K00
  • windows驱动精灵dx如何修复

    驱动精灵dx修复方法: 1、打开驱动精灵点击“百宝箱”。 2、点击右下方的“软件管理”。 3、在搜索栏中输入“Directx”。 4、找到“Directx 修复工具”点击“安装”即可。 感谢各位的阅读,以上就是“windows驱动精灵dx如何修复”的内容了,经过本文的学习后,相信大家对windows…

    2022年9月10日
    18200
联系我们
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部