vue数据更新但视图(DOM)不刷新解决办法

这篇具有很好参考价值的文章主要介绍了vue数据更新但视图(DOM)不刷新解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第一种:强制更新dom

<div v-if="isTrue">{{num}}</div>
data(){
    return {
        isTrue: true,
        num: 0
    }
}
aa () {
    this.isTrue = false // 强制刷新视图
    this.num++
    this.isTrue = true // 强制刷新视图
}

第二种:vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值)


// vue.$set 修改对象或数组的数据主要是添加响应式getter和setter让其拥有数据响应的特性
// this.$set( target, propertyName/index, value ) 
// vue 中this及vue


// 例子1: 比如修改name值没有生效

this.form.name = "111"  // 等同于 ==>
const name = "111"
this.$set(this.form, 'name', '111')
// 或
this.$set(this.form, 'name', name)


// 例子2:修改数组
let arr =[{name: "name1", sex: "男"},{name: "name2", sex: "男"}]

this.$set(arr, 1, {name: "name2", sex: "女"})


第三种: vue.$forceUpdate()


// 赋值之后强制更新视图

如
aa () {
    this.form = {
                    a: 'a',
                    b: 'b'
                }
    // 但是dom没有发生变化 数据赋值之后加上
    this.$forceUpdate()
}

对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论  在下知道的定会帮你回答希望能够帮到你 (#^.^#)文章来源地址https://www.toymoban.com/news/detail-513227.html

到了这里,关于vue数据更新但视图(DOM)不刷新解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app小程序父组件数据更新,实现自定义组件刷新视图

    之前错误的思路 新思路(忽略我的参数命名,写文章的时候方便。)

    2024年02月16日
    浏览(51)
  • vue3 - 使用reactive定义响应式数据进行列表赋值时,视图没有更新的解决方案

    在Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候,当是一个数组或对象时,我们直接进行赋值,发现数据已经修改成功,但是页⾯并没有自动渲染成最新的数据;这是为什么呢? 就如同官网所说的reactive存在一些 局限性 :(官方的描述) 原因就是reactive函数会返回一个

    2024年02月13日
    浏览(57)
  • vue/react项目刷新页面出现404的原因以及解决办法

    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。 产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个 index.html 文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,

    2024年02月06日
    浏览(50)
  • 关于vue路由跳转后的页面不会刷新的解决办法

    做uni项目的时候遇到的情况:1,父组件页面刷新了之后 需要触底加载的子组件能触底加载,否则不能加载。2,子组件不能触底加载,只需要刷新之后就能触底加载。以上的刷新不包括下拉刷新。3. 可能因为包了一层tab页导致跳转进页面没有请求数据的问题。 我的解决办法是

    2024年02月11日
    浏览(63)
  • elementUI点击当前行更改当前行状态(数据更新DOM不更新问题解决)

    cloneDeep:在很多情况下,我们都需要给变量赋值,给内存地址赋予一个值,但是在赋值 引用值类型 的时候,只是 共享一个内存区域 ,导致赋值的时候,还跟之前的值保持一致性。

    2024年02月14日
    浏览(43)
  • vue3 使用UI框架reactive数据更新,视图不更新问题

    本篇主要记录两个问题,然而这两个问题又都可以对应同一种解法。废话少说,解决方法在最上面。推荐格式如下: 一定一定要再多包一层,不然就会遇到一些问题。(⊙﹏⊙)虽然这是一句废话。下面的内容过于基础且本篇只记录bug和解法,想要探求为什么的呢,还请自己去

    2024年02月12日
    浏览(35)
  • vue3中数据更新了,但是视图没有更新的5中方案

    vue 3.0 ref 和 Reactive 数据响应式,以及使用 Reactive 数据已更新但页面没有同步刷新异常 方案1:Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候,当我们对象再次赋值,我们发现数据已经修改成功,但是页⾯并没有自动渲染成最新的数据; 这时我们可以改成 ref () 或者对

    2024年01月18日
    浏览(46)
  • Vue计算属性:简化数据处理和视图更新的利器

    计算属性:一个特殊属性,值依赖于另外一些数据动态计算出来。 🚩🚩🚩 计算属性特点:函数内使用的变量改变,重新计算结果返回。 💣💣💣 注意: ①、计算属性必须定义在computed节点中。 ②、计算属性必须是一个function,计算属性必须有返回值。 ③、计算属性不能

    2024年02月16日
    浏览(44)
  • vue通过router地址传参跳转同一路由页面,页面不刷新的解决办法

    vue、 vue-router@4 记录一下最近遇到的vue路由页面间的跳转的问题,其中就涉及到了不同路由的跳转(/a/b1 = /a/b2)、相同路由不同参数间的跳转(/a/b?c=1 = /a/b?c=2)、相同页面锚点跳转(/a/b#id1 =/a/b#id2) 原因:渲染的是同一组件 解决:可以在不刷新的页面通过监听route,重新加载

    2024年02月04日
    浏览(61)
  • Vue 出现Syntax Error:TypeError: Cannot read property ‘vue‘ of undefined的一种解决办法

    出现如下情况 背景:首次克隆运行项目 技术背景:项目使用的前端框架和UI框架 :vue2+element-ui 然后npm install 安装依赖,得到node_modules包和package-lock.json文件,然后npm run dev启动报错。 排查原因: 首先看了package.json 文件的node版本和npm版本支持 当前的我的node和npm版本用的是:

    2024年02月13日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包