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

原文地址:https://www.cnblogs.com/gionlee/p/10722449.html

时间: 2024-10-10 07:48:24

vue 数据改变但是视图没更新的相关文章

Vue 设置添加 JSON 视图不更新

1 for (let i = 0; i < this.gotup.length; i++) { 2 const element = this.gotup[i]; 3 console.log(element); 4 if (element) { 5 } 6 for (let io = 0; io < element.LstAttValue.length; io++) { 7 const elements = element.LstAttValue[io]; 8 if (ValueId == el

解决vue中对象属性改变视图不更新的问题

在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会实时更新 第二种情况是改变了对象的某一项,但是其他依赖这个数据的视图没更新 第一种情况是因为直接通过索引去改变数组,vue 对象监听不到他的变化 所以没有更新. ----解决方法  1. Vue.set(example1.items[0], { childMsg: 'Changed!'}) 2.使用

vue使用ECharts时的异步更新与数据加载

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco

mybatis update数据时无异常但没更新成功

没更新的问题原因: sqlSession.commit(); 没执行commit,但官方文档里有这样的描述:"默认情况下 MyBatis 不会自动提交事务,除非它侦测到有插入.更新或删除操作改变了数据库." 源码: <update id="updateTest" parameterType="cn.td.user.TestModel"> //TestModel是一个JavaBean update test_table set test

Vue数据双向绑定原理及简单实现

嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫

Vue 数据响应式原理

Vue 数据响应式原理 Vue.js 的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单的例子,对于模板: {{ name }} 创建一个 Vue 组件: var vm = new Vue({ el: '#root', data: { name: 'luobo' } }) 代码执行后,页面上对应位置会显示:luobo. 如果想改变显示的名字,只需要执行:

Android学习笔记二十二.使用ContentProvider实现数据共享(五).监听ContentProvider的数据改变

一.使用ContentProvider管理多媒体内容 Android提供了Camera程序来支持拍照.拍摄视频,用户拍摄的相片.视频都将存放在固定的位置.Android同样为这些多媒体内容提供了ContentProvider,所以我们可以通过使用ContentProvider实现其他应用直接访问Camera所拍摄的照片.视频等. 1.多媒体ContentProvider的Uri (1)MediaStore.Audio.Media.EXTERNAL_CONTENT_URI:存储在外部存储器(SD卡

vue.set的使用和vue数据的序列化

首先简单说一下vue双向数据绑定在实际应用上会有一点异常. 1.比如我想使用一个数组内部数据的改变,直接使用arr[0]='bbbb',这样是不会触发数据绑定的.视图不会变化. 2.这个问题就纯是js的问题了..我们需要把一个json数据的值赋值给另一个,当我们改变另一个数据内部的数据时.第一个也会跟着改变 一.首先对于问题一,官方已经给了很好的解释.怪就怪在我没有仔细看文档吧.记录一下涨个记性. <template> <div class="hello"> &

C#使用SqlDataAdapter 实现数据的批量插入和更新

近日由于项目要求在需要实现中型数据的批量插入和更新,晚上无聊,在网上看到看到这样的一个实现方法,特摘抄过来,以便以后可能用到参考. 一.数据的插入 DateTime begin = DateTime.Now; string connectionString = ......; using(SqlConnection conn = new SqlConnection(connectionString)){ conn.Open(); SqlDataAdapter sd = new SqlDataAd