当前位置：首页 > 编程日记 > 正文

vue更新data无效，页面data没刷新 vue.set

编程日记 2024-08-07 03:10:00

Vue中组件的data是有很多坑的，先普及一下常识：

1.想使用data，必须先在data中创建。（如果不创建就会报错）示例：

<div class="">{{user.Age}}</div>new Vue({el: '#app',data: {user:{Age:25}}
})

2.不能直接修改创建的对象的属性，例如想要给 user 添加一个 name 属性，值是 Jay 。

先来一个添加的错误示例（这是一个大坑，请注意），这样写页面不渲染，但是属性添加到了user对象，所以不会报错。

mounted() { this.user.name='Jay'; } //错误示例

再来几种正确有效的写法

解决方法一：强制刷新数据。这里用了 $forceUpdate() ，它可以强制刷新数据。

mounted() { this.user.name='Jay'; this.$forceUpdate();
} //正确示例

解决方法二：重写整个对象。因为在 data 里面创建了 user 对象，可以直接修改它，缺点是得重写整个对象。

mounted() { this.user={Age:25,name:'Jay'}
} //正确示例

解决方法三：重要知识点。Vue.set 方法。用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：

Vue.set( target, key, value )

参数说明：

target: 可以是对象或数组
key : 可以是字符串或数字
value: 可以是任何类型

使用代码示例

new Vue({el: '#app',data:{a:{b:1}},mounted() {this.$set(this.a, 'bb', 121);}
})

到这里基本就算讲完，如果感觉已经理解，下面就可以不用看了，下面提供了几个帮助大家更好的理解的demo。

在Vue中，一般只有在data选项中声明的属性（或者是属性的属性）才是具有响应特性的。如果需要在data选项之外对已有属性添加（Vue 不允许动态添加根级响应式属性）具有响应特性的属性，需要用到Vue的set方法。

var vm = new Vue({data: {a: {              //a就是根级属性，不可动态添加b: 0          //b就是属性的属性，可以动态添加}}
})

何为响应特性？就是当我们更改data中的值的时候，HTML与之绑定的部分会随之更新的特性。

例1，Vue文档中的例子

var vm = new Vue({data: {a: 1}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

例1中的a就是在data中声明的具有响应特性的属性，而b就不是。

例2，把上面的例子修改一下

var vm = new Vue({data: {a: {a1:''}},methods: {change: function () {this.a.a1 = "test"    //a1就是响应式的this.a.a2 = "testtest"    //a2就不是响应式的}}
})

在实际操作中，例2的a2虽然不是响应式的，但他却是可以在HTML部分被渲染更新出来。这里就是一个比较容易掉进去的坑了。由于Vue是异步执行DOM更新，虽然更新的动作是由this.a.a1 = "test"触发，可动作的完成是在this.a.a2 = "testtest"之后。

例3，一个更加完整的例子

var vm = new Vue({data: {a: {a1:''}},methods: {change: function () {this.a.a1 = "test"    //a1就是响应式的this.a.a2 = "testtest"    //a2就不是响应式的var that = this;setTimeout(function () {that.a.a3 = 'new text'; //这里与a2是相同的，却别在于这里的a3并不会被渲染到DOM中that.$set(that.a, 'a4', 'new text');    //这是正确的添加属性的方法that.a = {                              //这种写法与a2不同，a5可以被更新到DOM中a5: 'hahaha'}}, 1);}}
})

https://www.dkcj.cn/info/13159.html

vue更新data无效，页面data没刷新 vue.set

相关文章：

重温Thinking in java

2018 react 大会_React Conf 2018的经验教训

删除url中某个参数

【转载】MSXML应用总结开发篇（下）

d010:盈数、亏数和完全数

软件开发理想_我如何在12个月内找到理想的软件工作

Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定管道

给GridView增加求和行

phpMyAdmin 数据库添加int类型的值时默认设为唯一主键的问题解决

python 类中定义类_Python中的动态类定义

用自定义方法，传入成绩数组，实现输出考试成绩的成三名

EJS 什么是EJS后缀文件 EJS怎么用

一个推荐系统，实现完整的设计-在百度搜索关键词推荐案例

如何充分利用JavaScript（ES6）中的解构功能

React 开发环境搭建

c++中的友元重载

WPF解析TTF 字体

redux logic_Redux-Logic简介

[SDOI2009]HH的项链

DvaJS 入门，快速上手Dva

Static、DynamicResource学习笔记一

javascript迭代器_JavaScript迭代器概述

knockout学习笔记目录

ant Design Pro 登录状态管理

初级java开发学习路线_成为初级全栈Web开发人员的10分钟路线图

国外物联网平台初探（四）：Ayla Networks

《英语语法新思维初级教程》学习笔记（一）名词短语

根据数组中对象的属性值排序倒叙

!! javascript_产量！产量！生成器如何在JavaScript中工作。

ACM 竞赛高校联盟练习赛第二场 BC