位置: IT常识 - 正文

Vue中 数据改变但未渲染的问题,页面中并没有自动更新,但是在控制台可以打印出来,常见解决方法(vue更改数据)

编辑:rootadmin
Vue中 数据改变但未渲染的问题,页面中并没有自动更新,但是在控制台可以打印出来,常见解决方法

推荐整理分享Vue中 数据改变但未渲染的问题,页面中并没有自动更新,但是在控制台可以打印出来,常见解决方法(vue更改数据),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuex改变数据,vuex改变数据,vue怎样改变data里面的数据,vue怎样改变data里面的数据,vuex改变数据,vue怎样改变data里面的数据,vue修改数据后怎么让数据更新,vue中数据改变页面没有重新渲染,内容如对您有帮助,希望把文章链接给更多的朋友!

在Vue组件中,在mounted阶段调用了一个函数去请求异步数据,将返回结果赋给data里面的值却失败了,赋值完console.log()出来明明是有值的,但页面却没有更新过来。我还一直以为是nuxt生命周期的原因,但明显不是。因为这个问题只有在偶尔才会出现,并不是每次进入页面时渲染都会有这个问题。

1.简单粗暴的方式:重新加载整个页面(体验不友好,不推荐)

2.不妥的方式:使用 v-if

<template><my-component v-if="showComponent" /></template><script>export default {data() {return {showComponent: true,};},methods: {forceRerender() {// 从 DOM 中删除 my-component 组件this.showComponent = false;this.$nextTick(() => {// 在 DOM 中添加 my-component 组件this.showComponent = true;});}}};</script>

3.较好的方法:使用Vue的内置forceUpdate方法

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

// 全局import Vue from 'vue';Vue.forceUpdate();// 使用组件实例export default {methods: {methodThatForcesUpdate() {// ...this.$forceUpdate();// ...}}}Vue中 数据改变但未渲染的问题,页面中并没有自动更新,但是在控制台可以打印出来,常见解决方法(vue更改数据)

4.最好的方法:在组件上进行 key 更改

<template><component-render :key="componentKey" /></template>export default {data() {return {componentKey: 0,};},methods: {forceRerender() {this.componentKey += 1;}}}

5.使用Object.assign()

MDN:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

方法:

克隆对象,Object.assign({}, target)

克隆数组,Object.assign([], target)针对上例,修改add方法。

this.queryParam = Object.assign({}, this.queryParam);6.使用Vue.set( target , key , value)

方法:

target: 要更改的数据源(可以是一个对象或者数组)key 要更改的具体数据。如果是数组元素更改,key表示索引;如果是对象,key表示键值value 重新赋的值

add() {this.$set(this.persons, 1, {key: 'newkey', name: '888'})console.log(this.persons)}7. ... 展开语法

对象数据obj,使用obj = {...obj}

对于数组arr,使用arr = [...arr]

add() {this.persons[1] = {key: 'newkey', name: '888'}this.persons = [...this.persons]console.log(this.persons)}
本文链接地址:https://www.jiuchutong.com/zhishi/297585.html 转载请保留说明!

上一篇:小满nestjs(第一章 介绍nestjs)(小满秒懂百科)

下一篇:关于服务连接器(Servlet)你了解多少?(服务器连接方式包括直接相连,间接连接)

  • 苹果13promax怎么关闭横屏(苹果13promax怎么关机)

    苹果13promax怎么关闭横屏(苹果13promax怎么关机)

  • oppofindx3屏幕尺寸大小(oppofindx3屏幕几k)

    oppofindx3屏幕尺寸大小(oppofindx3屏幕几k)

  • 超星云盘容量多大(超星云盘文件下载到手机)

    超星云盘容量多大(超星云盘文件下载到手机)

  • 单方删除微信好友,又加会有提示吗(单方删除微信好友,又加会有提示吗)

    单方删除微信好友,又加会有提示吗(单方删除微信好友,又加会有提示吗)

  • 个人热点是干什么的(个人热点let)

    个人热点是干什么的(个人热点let)

  • 魅族手机流量自动打开怎么处理(魅族手机流量自动开启)

    魅族手机流量自动打开怎么处理(魅族手机流量自动开启)

  • xr来电闪光灯怎么开(苹果xr开启来电闪光灯)

    xr来电闪光灯怎么开(苹果xr开启来电闪光灯)

  • 店铺层级对流量的影响(店铺的等级和流量的分配)

    店铺层级对流量的影响(店铺的等级和流量的分配)

  • apple watch可以听歌吗(applewatch可以听音乐吗)

    apple watch可以听歌吗(applewatch可以听音乐吗)

  • 华为畅享10plus耗电快怎么办(华为畅享10plus耗电吗)

    华为畅享10plus耗电快怎么办(华为畅享10plus耗电吗)

  • 抖音怎么查看自己的钱包(抖音怎么查看自己的日常)

    抖音怎么查看自己的钱包(抖音怎么查看自己的日常)

  • 怎么筛选表格的数据(怎么筛选表格的身份证月份)

    怎么筛选表格的数据(怎么筛选表格的身份证月份)

  • 手机onedrive速度太慢(手机 onedrive)

    手机onedrive速度太慢(手机 onedrive)

  • excel审阅模式怎么开启(excel2003审阅)

    excel审阅模式怎么开启(excel2003审阅)

  • oppo应用时间怎么关闭(oppo的应用时间在哪里)

    oppo应用时间怎么关闭(oppo的应用时间在哪里)

  • 4r7电阻是多少(4r7电阻是多少欧)

    4r7电阻是多少(4r7电阻是多少欧)

  • 天猫榜单是什么(天猫榜单是正品吗)

    天猫榜单是什么(天猫榜单是正品吗)

  • iphone x如何打开天气(iphonex如何打开电池百分比)

    iphone x如何打开天气(iphonex如何打开电池百分比)

  • vivos1手机支持闪充吗(vivos1手机闪充模式怎么开启)

    vivos1手机支持闪充吗(vivos1手机闪充模式怎么开启)

  • 怎么恢复陌陌聊天记录(怎么恢复陌陌聊天记录不用电脑)

    怎么恢复陌陌聊天记录(怎么恢复陌陌聊天记录不用电脑)

  • 一直播回放怎么下载(一直播回放怎么删除不了)

    一直播回放怎么下载(一直播回放怎么删除不了)

  • 新苹果平板怎么激活(新苹果平板怎么用)

    新苹果平板怎么激活(新苹果平板怎么用)

  • 什么叫威客(威客包括什么类型)

    什么叫威客(威客包括什么类型)

  • 手机屏幕白斑会扩散吗(手机屏幕白斑会自己消失吗)

    手机屏幕白斑会扩散吗(手机屏幕白斑会自己消失吗)

  • pdsched.exe是什么进程 pdsched进程查询(pddpic是什么文件)

    pdsched.exe是什么进程 pdsched进程查询(pddpic是什么文件)

  • 详解Python中的Thread线程模块(python tle)

    详解Python中的Thread线程模块(python tle)

  • 企业所得税税负高是什么意思
  • 个人所得税的计提和缴纳分录怎么做
  • 印花税技术合同计税依据
  • 股票股利的资金来源
  • 年报后 申报报表年初数会调整吗
  • 个体工商户每月需要申报个税吗
  • 审计报告印花标
  • 小规模旅游业差额增值税税率
  • 房东收到房租转让费会计处理
  • 高新技术企业清算所得税率是多少
  • 先开了发票给客户,不付款怎么办
  • 再保后赔款支出
  • 年度所得税汇算清缴报告在哪打印
  • 公司出差是自己先垫付再报账吗
  • 房地产预收账款是什么
  • 年末一般纳税人应交增值税借贷调平什么意思
  • 上月开的销项专票如何做废?
  • 购买加油卡能否开发票
  • 免税收入包括哪些收入
  • 生产型企业进出口初申报流程
  • 进料加工出口退税计算 计划分配率
  • 已核销的应收账款
  • 公司财产损失会不会必然导致股权损失
  • 收到出口退税计入什么
  • windows中的网络协议的配置原理
  • 插上u盘电脑无法访问怎么办
  • 事业单位工会经费会计账务处理办法
  • windows资源管理器未响应怎么办
  • 制造费用结转到主营业务成本
  • PHP:pg_affected_rows()的用法_PostgreSQL函数
  • 后端返回pdf文件地址,前端怎么渲染到页面
  • PHP:mcrypt_enc_get_algorithms_name()的用法_Mcrypt函数
  • 汽车购置税去哪交钱
  • phpsql查询
  • vue created mounted
  • 基于Java+SpringBoot+Vue+uniapp微信小程序零食商城系统设计和实现
  • 工程收到款项会计分录
  • css动画效果代码
  • php读取文件内容的方法和函数
  • 金税盘白盘怎么分发发票
  • 保险公司应收保费汇报范文
  • 宝塔wordpress安装
  • 逾期包装物押金收入计入什么科目
  • 工会保障工作的主要任务有哪些
  • 库存盘点问题及改善对策
  • sqlserver 查询语句
  • SQL Server 2008中SQL查询语句字段值不区分大小写的问题解决
  • 突然收到电子退库收入
  • 携程代订住宿发票
  • 同一个单位能否交五险
  • 物业费没收到可以确认收入吗
  • 少数股东权益如何保障
  • 汇算清缴补税的凭证后面需要附件吗
  • 买材料含税价怎么算
  • 建筑材料租赁公司
  • 预付账款的会计处理
  • 专票和普票的作用
  • FreeBSD su Sorry问题解决办法
  • unix系统的最大特点
  • winxp系统安装教程
  • MAC百度网盘下载的压缩包怎么导出
  • mac文件权限
  • 怎么激活win7旗舰版系统
  • win10系统应用更新
  • unity3ds
  • perl有什么用
  • perl脚本调试方法
  • javascriptz
  • cmd Tasklist与Tskill管理Windows系统进程
  • JavaScript中setMonth()方法的使用详解
  • js判断时间差
  • HorizontalListView
  • jquery获取单选按钮的值
  • Android SimpleAdapter
  • 可以跨区办理税务ukey更换吗
  • 广州市国家税务局第三分局
  • 南通税务网站
  • 购买的土地没有土地使用证
  • 甘肃省国家税务局电子税务局
  • 应缴纳资源税税额怎么计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设