vue 数据改变但是视图没更新
在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set
如果是对象类型:
this.$set(this.userInfo, 'name', 'gionlee');
其中this.userInfo 为变量名称, 'name' 为对象的key,'gionlee'为name对应的值。
如果是数组类型:
this.$set(this.arr, 0, 'gionlee');
其中this.arr 为数组,0 为 this.arr 对象的下标值,'gionlee'为arr[0]对应的值。
详情可以看:官方提供的API
------------------------------------------------------------分割线-----------------------------------------------------------------
也可以使用强制渲染 this.$forceUpdate()
更新于:2019-11-08
vue 数据改变但是视图没更新的更多相关文章
- vue 数组push元素 视图没更新
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...
- vue修改elementUI的分页组件视图没更新问题
转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...
- vue 数据没有驱动视图?
Part.1 问题 数据改变,视图却没有根据数据而改变. 原因在于,数据并不在 vue 监听范围之内,vue 只对事先在 data 中声明的变量丶对象等类型数据进行监听 Part.2 例子 < ...
- sublime text3 - vue修改data,视图无更新
ubuntu系统使用sublime text3做vue开发的时候遇到了一个问题,就是修改vue文件并保存后视图页面并不会随之修改,只有重新run dev时修改才会生效,原因没找到 猜想应该是subli ...
- [ 记录 ] Vue 对象数组中一项数据改变,页面不更新
问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新 数据格式如下 export default{ data(){ ...
- vue 数据更新了但视图没改变?试试 $set
场景 编辑表格中某行数据时,需要把它赋值给对话框表单 this.form,如果直接用 = 赋值,会导致:表单的输入框内容无法二次编辑. 使用 Vue-dev-tool 的 Components 功能测 ...
- vue数组中数据变化但是视图没有更新解决方案
原文链接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined 问题:在vue项目中,我更改数组中的某一条数据,直接arr[i]=newVal ...
- 解决微信小程序wepy真机预览跟本地表现不一样,数据变化了视图没变化
当时搜了很多相关问题都没找到相似的 只看到有这个相似的描述wepy在onLoad里修改data-object的值页面不渲染 ,通过setData解决的. 但是这个还不是根本的解决办法,有些地方用set ...
- vue中改变数组的值视图无变化
今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单 ...
随机推荐
- 有趣的8个IT冷知识
阅读本文大概需要 2.8 分钟. 想要成为一名成功的程序员,我们除了了解不同编程语言的设计思路,也应当了解编程的发展历史,从而判断未来的编程技术将走向何方.接下就为大家普及下计算机发展历程中的8个冷门 ...
- mongodb副本集实现
目录 1. 简单介绍 primary: secondary: arbiter: 2.系统环境设置: 3.安装mongodb 安装mongodb 增加配置文件: 添加启动脚本 3. 副本集实现: 1. ...
- 一个C#程序员学习微信小程序的笔记
客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在启动的时候,将首页的代码装载进来,通 ...
- 带你学习AOP框架之Aspect.Core[1]
在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的 ...
- 基于async/non-blocking高性能redis组件库BeetleX.Redis
BeetleX.Redis是基于async/non-blocking模式实现的高性能redis组件库,组件支持redis基础指令集,并封装更简便的List,Hashset和Subscribe操作.除了 ...
- 游戏AI之初步介绍(0)
目录 游戏AI是什么? 游戏AI和理论AI 智能的假象 (更新)游戏AI和机器学习 介绍一些游戏AI 4X游戏AI <求生之路>系列 角色扮演/沙盒游戏中的NPC 游戏AI 需要学些什么? ...
- C# 错误:空对象不能转换为值类型
最近在做项目的时候出现了一个错误 当从数据库中获取值的时候 报错:空对象不能转换为值类型 因为数据库你查询数据的时候不是所有的字段都是存在数据的,有些字段可能是Null值,也就是没有数据 当你在类型转 ...
- MVC设计模式思想及简单实现
一.什么是MVC MVC即Model-View-Controller(模型-视图-控制器)是一种软件设计模式,最早出现在Smalltalk语言中,后被Sun公司推荐为Java EE平台的设计模式. M ...
- MySQL5.7下面,误操作导致的drop table db1.tb1; 的恢复方法:
MySQL5.7下面,误操作导致的drop table db1.tb1; 的恢复方法: 0.停业务数据写入.[iptables封禁] 1.从备份服务器上拉取最新的一个全备文件,恢复到一个临时的服务器上 ...
- css实现发光文字,以及一点点js特效
效果图: 代码如下: </head> <style> body{ background-color:#000; } .textArea{ font-size:100px; co ...