vue修改数据页面无效的解决方案

目录
  • vue修改数据页面无效
    • 如下案例
    • 有两种解决方案
  • 更改数据后页面不刷新的问题

vue修改数据页面无效

项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性。

如下案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="addAttribute()">添加属性方法</button>
        <p>student属性显示在下面</p>
        <ul>
            <li v-for="item in student">{{item}}</li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                student: {
                    name: 'zdx'
                }
            },
            methods: {
                addAttribute() {
                    this.student.age = 18;    //为student对象添加属性
                    console.log(this.student);
                }
            }
        })
    </script>
</body>
</html>

原因是由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化，针对这个问题

有两种解决方案

1.this.$set(obj, key, value) 或 vue.set(obj, key, value)

methods: {
    addAttribute() {
        // this.student.age = 18;
        this.$set(this.student, 'age', 18);
        console.log(this.student);
    }
}

2.Object.assign(target, sources)

 methods: {
      addAttribute() {
          // this.student.age = 18;
          // this.$set(this.student, 'age', 18);
          this.student.age = 18;
          this.student = Object.assign({}, this.student);
          console.log(this.student);
      }
  }

更改数据后页面不刷新的问题

今天遇到的，通过v-if控制标签切换效果，出现没任何反应的情况。检测数据正常，只是页面没有渲染。

查了很多资料因为数据层次太多，render函数没有自动更新，需手动强制刷新。

通过

this.$forceUpdate();

强制刷新即可

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决Vue 通过下表修改数组,页面不渲染的问题

    需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值: vm.todos[0] = { name: 'New name', description: 'New description' }; 会导致Vue无法更新View. 正确的方法是不要对数组元素赋值,而是更新: vm.todos[0].name =

  • vue中更改数组中属性,在页面中不生效的解决方法

    问题描述: 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态 解决方案: edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,

  • 解决vue中修改了数据但视图无法更新的情况

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • vue修改数据页面无效的解决方案

    vue修改数据页面无效的解决方案

    目录 vue修改数据页面无效 如下案例 有两种解决方案 更改数据后页面不刷新的问题 vue修改数据页面无效 项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性. 如下案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

  • vue项目出现页面空白的解决方案

    今天新建项目,然后发现路由也改了  app.vue里面也是啥都没有, 但是访问http://localhost:8080/#/login  能访问  里面确实空白的 错误: 错误原因: path: '/'   只能有1个 整个项目只能有一个[但是我有了2个],然后我要重定向到login页面,我path又没配置好. 导致页面啥都出不来. 解决办法如下: 以上这篇vue项目出现页面空白的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue修改数据的时候,表单值回显不正确问题及解决

    目录 修改数据的时候,表单值回显不正确 vue简单实现数据回显 1.回显输入框html 2.data 定义的数据 3.计算属性判断按钮状态 4.对*数据做处理 修改数据的时候,表单值回显不正确 如果在修改数据的时候,发现表单的值回显不正确,每次修改,都是第一次修改的值,这个可能是你的代码有问题. 如果出现上面的问题,请检查 (1) prop的数据是否绑定正确 <el-col :span="24">   <el-form-item label="图标"

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

  • Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置

    需求分析 背景: 1.数据列表页,滚动加载数据: 2.多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作: 3.保存返回上一页: 在上面的情况下,想要保持在上次浏览位置,并且保持数据是最新的: 解决办法 1.原始的办法:在点击详情页的时候,记住浏览位置,传递参数或者存到本地缓存,然后在详情页操作完毕后,返回的时候,路由守卫可以判断,是否详情页跳转回来的,然后让页面滚动到上次记录的位置: 思路是这样,实际操作很麻烦: 2.推荐办法:使用vue动态组件keep-alive,搭配路由守卫

  • vue 修改 data 数据问题并实时显示的方法

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初

  • vue修改对象的属性值后页面不重新渲染的实例

    最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • 浅谈Vue页面级缓存解决方案feb-alive(上)

    feb-alive github地址 体验链接 使用理由 开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated 开发者无需手动缓存页面状态,例如通过localStorage或者sessionStorage缓存当前页面的数据 feb-alive会帮你处理路由meta信息的存储与恢复 为什么开发feb-laive? 当我们通过Vue开发项目时候,是否会有以下场景需求? /a跳转到/b 后退到/a时候,希望从缓存中恢复页面

  • 浅谈Vue页面级缓存解决方案feb-alive (下)

    浅谈Vue页面级缓存解决方案feb-alive (下)

    feb-alive github地址 体验链接 Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实现之前,希望大家对以下基本知识有一定的了解. keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 feb-alive与keep-alive差异性 1. 针对activated钩子差异性 keep-alive配合vue-router在动态路由切换的情况下不会触发activated钩子,因为切换的时候组件没有变化,所以只能通过befor

随机推荐