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

相关推荐

  • filestorage文件夹有什么作用

    filestorage文件夹一般是微信用于保存接收文件和图片的文件夹;文件夹用来协助人们管理计算机文件的,每一个文件夹对应一块磁盘空间,它提供了指向对应空间的地址,它没有扩展名,也就不像文件的格式用扩展名来标识,filestorage文件夹不建议删除,删除的话会导致微信中无法查看图片或者视频。 本教…

    2022年9月8日
    11600
  • win server2012 r2服务器共享文件夹怎么设置

    1.启用guest账号 控制面板->用户账户->管理其他账户->Guest启用 2.设置共享%ignore_a_1% 添加everyone和Guest 点击共享 点击网络和共享中心 关闭密码保护共享 3.策略中找到 网络访问->本地帐户的共享和安全模型”并双击,会弹出其属性窗…

    2022年9月24日
    16400
  • git如何解决合并冲突

    本篇文章“git如何解决合并冲突”主要为您从以下几个方面讲解:原因、解决方法、git冲突、解决冲突,希望对您有所启发。 git解决合并冲突的方法:1、编辑有冲突的文件,并删除文件中的特殊符号,根据需求修改代码;2、将指定文件添加到暂存区,并将指定的分支提交到主干,执行提交即可,其中使用“git co…

    2022年6月29日
    50600
  • vlookup函数老是出错#n/a如何解决

    解决方法 1、首先打开要引用的数据表,然后把要查找的对象拷贝到这个表中,位置自己根据需要放置就可以了。 2、把光标定位在K2栏,在这里输入公式,有时记不熟的,可以在上面菜单栏里去找。 3、在公式里点击查找与应用右边的下拉箭头,找到最下边的vlookup函数点击。 4、这时出现函数参数对话框,在这里可…

    2022年9月21日
    5300
  • windows office365头像不同步怎么解决

    office365头像不同步: 答:office365头像不同步可能是组件方面的问题建议先更新一下office组件解决。 也可能是网络的问题导致没有那么快的进行同步,可以换一个快一点的网络试试。 还有就是微软方面的问题了,没有立刻反馈并同步,只样就只可以去等待一下了。 office365头像更改教程…

    2022年9月21日
    26900
  • Word首页不同怎么设置

    首页不同设置方法: 1、首先打开word,加入你的页眉。 2、之后去双击这个里面的“页眉”。 3、然后去选择菜单栏中的“页眉和页脚选项”。 4、最后就可以在工具模块里面的勾选“首页不同”了。 关于“Word首页不同怎么设置”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注…

    2022年8月31日
    19800
  • SQL中的开窗函数是什么

    OVER的定义 OVER用于为行定义一个窗口,它对一组值进行操作,不需要使用GROUP BY子句对数据进行分组,能够在同一行中同时返回基础行的列和聚合列。 OVER的语法 OVER ( [ PARTITION BY column ] [ ORDER BY culumn ] ) PARTITION B…

    2022年9月2日
    11200
  • SQL注入语法有哪些

    仅供参考学习使用。 SQL注入语法 报错注入 updatexml(1,concat(0x7e,(select database()),0x7e),1)–+extractvalue(1,concat(0x7e,(select database()),0x7e),1)–+select count(*…

    2022年9月6日
    9100
  • MySQL之InnoDB中锁的情况分析

    mysql> select @@version;+———–+| @@version |+———–+| 5.7.21 |+———–+1 row in set (0.01 sec) 一,锁的基本介绍 相对其他数据库而言,MySQL的锁机制比较简单,其最显著…

    2022年9月15日
    12100
  • MySQL中的join语句算法如何优化

    一、join语句算法 创建两个表t1和t2 CREATE TABLE `t2` ( `id` int(11) NOT NULL, `a` int(11) DEFAULT NULL, `b` int(11) DEFAULT NULL, PRIMARY KEY (`id`), KEY `a` (`a`)…

    2022年9月16日
    7900
联系我们
关注微信
关注微信
分享本页
返回顶部
PingCode 比 Jira 更好用的研发管理工具。免费试用         文章及站点合作,请添加微:All-FeiFei