首页 > 其他分享 >Vue的数据更新,页面不更新的解决办法

Vue的数据更新,页面不更新的解决办法

时间:2023-08-17 19:45:23浏览次数:36  
标签:解决办法 Vue 更新 scope row 数据 页面

可能原因

更新的数据跟源数据不是同一个,即不是同一个引用

解决办法

最稳妥的办法,可通过拿到源数据取索引的方式进行数据的更新,如:
有一个源数据叫:originData

那么如果在更新时,通过this.originData[index].time = newValue的方式进行更新,而不是item.time = newValue

这样,更新的是源数据,大概率可解决问题。

其他可能的原因及解决办法

  1. 页面组件重复
    解决办法: 给组件加上key='xxx' xxx确保不要重复

  2. 部分对象不支持更改,如:scope.row
    解决办法: 新建对象let newObj = {...scope.row},甚至深拷贝let newObj = JSON.parse(JSON.stringify(scope.row))

  3. 数据不是双向绑定
    解决办法:响应式更新this.$set(this, '你的变量', 新值)

  4. 数据层级过深
    解决办法:强制更新this.$forceUpdate()

标签:解决办法,Vue,更新,scope,row,数据,页面
From: https://www.cnblogs.com/aiyablog/p/17638677.html

相关文章

  • 微信小程序:伪装页面达到定时改变页面内容的目标
    Step1:在app.js中,导入util包用于获取时间varutil=require('/utils/util.js')Step2:在app.js中,将onLaunch函数加入以下内容:onLaunch:function(){vartime='2022/05/2213:00:00'//这个时间是预计审核通过后的时间vart=util.formatTime(newDate());thi......
  • 微信小程序:发布动态页面模板
    1前言由于功能需求,需要在小程序中开发社区打卡模块。打卡模块中上传发布的界面是必不可少的。于是利用flex布局设计了上传动态的页面。页面截图如下:由于是模板分享,这里也不做过多介绍了,通过代码来说明吧。页面主要有四个文件,分别是create.js、create.json、create.wxml、cre......
  • 【题解】#373. 「USACO1.1」Friday the Thirteenth 题解(2023-07-19更新)
    #373.「USACO1.1」FridaytheThirteenth题解本文章的访问次数为次。Part1提示题目传送门欢迎大家指出错误并私信这个蒟蒻欢迎大家在下方评论区写出自己的疑问(记得@这个蒟蒻)Part2背景这个蒟蒻又一次写了一篇大水题的题解(话说为什么是又),当然也是为了纪念他的\(......
  • 【题解】#68. 「NOIP2004」津津的储蓄计划 题解(2023-07-19更新)
    #68.「NOIP2004」津津的储蓄计划题解本文章的访问次数为次。Part1提示题目传送门欢迎大家指出错误并私信这个蒟蒻欢迎大家在下方评论区写出自己的疑问(记得@这个蒟蒻)Part2背景这是这个蒟蒻的第一篇题解,也是这个蒟蒻对自己的\(50\)AC的纪念。Part3更新日志......
  • vue2使用vite
    安装插件//一个vite必备,第二个是为了兼容vue2npmi-Dvitevite-plugin-vue2将public中的index.html拉出来,放在最外层,与package.json同级在index.html中引入main.js<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-e......
  • 前端页面常见的布局方式有以下几种
    前端页面常见的布局方式有以下几种1、文档流--内联元素从左往右排列,块级元素从上往下排列。2、float(浮动)布局3、position(定位)布局4、displayinline-block(行向)布局5、margin布局6、display:flex弹性布局7、display:grid栅格布局1、文档流(正常流,也叫文档流)内联元......
  • vue3 vue.config.js配置详解
    //vue.config.js文件是用于VueCLI项目的全局配置的module.exports={  //部署应用包时的公共路径  publicPath:"./",  //生产环境构建文件的目录名(默认为dist)  outputDir:"dist",  //放置生成的静态资源的目录(默认为dist/static),可以修改为public。  assetsDir......
  • vue面试2
    VUE21.为什么.Vue被称为“渐进框架”?使用渐进式框架的代价很小,从而使现有项目(使用其他技术构建的项目)更容易采用并迁移到新框架。Vue.js是一个渐进式框架,因为你可以逐步将其引入现有应用,而不必从头开始重写整个程序。Vue的最基本和核心的部分涉及“视图”层,因此可以通......
  • vue3 文件上传进度条组件
    index.vue文件<template><divclass="confirm-modal"><transitionname="fade"><divclass="modal-dialog"@click="clickMaskToClose?handleCancel():null"v-if="visible"@tou......
  • 从输入URL到页面展示
    目录用户输入过程URL请求过过程重定向响应数据处理准备渲染进程提交文档渲染过程用户输入过程地址栏omnibox判断用户的输入是搜索内容还是URL链接:如果是搜索内容,地址栏使用默认的搜索引擎合成带搜索关键字的URL链接如果输入内容符合URL规则,则加上协议合成完整的URL链接......