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

相关推荐

  • 2024年9款优质CRM系统全方位解析

    文章介绍的工具有:纷享销客、Zoho CRM、八百客、红圈通、简道云、简信CRM、Salesforce、HubSpot CRM、Apptivo。 在选择合适的CRM系统时,许多企业面临着功能繁多、选择困难的痛点。对于中小企业来说,找到一个既能提高客户关系管理效率,又能适应业务扩展的CRM系统尤为重要…

    2024年7月25日
    1600
  • 数据库权限关系图表是什么

    数据库权限关系图表是一种以图表形式展示数据库权限分配和管理的工具。它可以有效地帮助我们理解和管理数据库中的各种权限关系。数据库权限关系图表主要包含以下几个部分:数据对象、用户(或用户组)、权限类型、权限级别、权限状态等。其中,数据对象是权限关系图表中的核心元素,它代表了数据库中的各种数据资源,如表、…

    2024年7月22日
    200
  • 诚信数据库是什么意思

    诚信数据库是一种收集、存储和管理个人或组织诚信信息的系统。它是一种用于评估和管理个人或组织行为的工具,通常由政府、商业组织或者非营利组织进行运营。诚信数据库的主要功能包括:1、评估个人或组织的诚信状况;2、提供决策支持;3、预防和控制风险;4、促进社会信用体系建设。 在这四大功能中,评估个人或组织的…

    2024年7月22日
    400
  • 数据库期末关系代数是什么

    关系代数是一种对关系进行操作的代数系统,是关系模型的数学基础,主要用于从关系数据库中检索数据。其操作包括选择、投影、并集、差集、笛卡尔积、连接、除法等。其中,选择操作是对关系中的元组进行筛选,只保留满足某一条件的元组;投影操作则是从关系中选择出一部分属性构造一个新的关系。 一、选择操作 选择操作是关…

    2024年7月22日
    700
  • mysql建立数据库用什么命令

    在MySQL中,我们使用"CREATE DATABASE"命令来创建数据库。这是一个非常简单且基础的命令,其语法为:CREATE DATABASE 数据库名。在这个命令中,“CREATE DATABASE”是固定的,而“数据库名”则是你要创建的数据库的名称,可以自己设定。例如,如…

    2024年7月22日
    500
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

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

分享本页
返回顶部