文档章节

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

Js_Mei
 Js_Mei
发布于 01/18 04:13
字数 459
阅读 17
收藏 1

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化

原因如下:

**受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。 https://cn.vuejs.org/v2/guide/reactivity.html **

官方API:Vue.set():

此时我们需要知道Vue.set()需要哪些参数,

调用方法:Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

Tip:Vue.set()在methods中也可以写成this.$set()

解决办法:


this.$set(this.oilBrandsArr[index], 'checked', true)

**注意: **如果要对这个对象进行$set操作就不要用别的方法对这个对象进行操作,否则this.$set()则不会生效


this.oilBrandsArr[i].checked = true

别的地方又用this.$set() 则都不会触发更新

附加:有时你想向一个已有对象添加多个属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,这样添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:


this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

© 著作权归作者所有

共有 人打赏支持
Js_Mei
粉丝 3
博文 59
码字总数 12380
作品 0
朝阳
前端工程师
私信 提问
vue笔记-vue项目中对象数组数据变化,但视图未更新的解决方案(待项目细节描述)?

前言 在负责的后台管理系统中,我的添加人员与编辑人员两个功能共用了一个组件,但是遇见一个问题.同样是用v-for去渲染一些标签,在使用编辑人员功能时,删除对象数组元素,对应的标签在页面上也会...

梦里梦一
2018/10/26
0
0
vue2.x入坑总结—回顾对比angularJS/React

从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑。vue/anguarJS/React,三者对关系现在就是: https://www.zhoulujun.cn/upl...

zhoulujun
2018/08/03
0
0
Vue笔记(6) - v-for详解及set方法

https://cn.vuejs.org/v2/guide/list.html 1、key 当 Vue.js 用 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的...

神奇的小卷毛
2018/04/22
0
0
你或许不知道Vue的这些小技巧

前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候...

OBKoro1
2018/10/29
0
0
vue中需要注意的问题总结(上)

文章首发于个人博客 前言 使用vue的时候经常会遇到一些问题,其实仔细阅读查阅官方文档,就会发现文档中已提到一些格外需要注意的点; 为了深入的理解官方文档中对这些问题的解释,查阅了一些资料...

funnycoderstar
2018/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

学习设计模式之路

https://java-design-patterns.com/patterns/ https://www.oodesign.com/ https://www.programering.com/a/MTNxAzMwATY.html https://design-patterns.readthedocs.io/zh_CN/latest/ https:/......

晨猫
今天
1
0
JDK1.8 jar包说明

JDK 1.8 lib:access-bridge-64.jarcharsets.jarcldrdata.jardeploy.jardnsns.jarjaccess.jarjavawa.jarjce.jarjfr.jarjfxrt.jarjfxswt.jarjsse.jarlocaledata.jar......

冷基
今天
1
0
判断用户的icloud是否开启【Swift4.2】

使用icloudkit存储用户私人数据时,必须判断用户的icloud是否开启【Swift4.2】 func isICloudContainerAvailable()-> Bool { if FileManager.default.ubiquityIdentityToken != ni......

叶落花开
今天
2
0
今天的学习

1、执行git add *命令就把改动提交到了暂存区,执行git pull命令将远程仓库的数据拉到当前分支并合并,执行git checkout [branch-name]切换分支 2、执行git commit -m '说明' 命令就把改动提...

墨冥
昨天
0
0
Android4.4 及以下TextView,Button等控件使用矢量图报错

1 问题描述 最近项目开发中,图标资源我尽量使用了矢量图,然而配置了基本的兼容设置,程序在低版本中运行还是出现了问题。 xml布局文件中,在TextView中使用矢量图,比如android:drawableS...

newtrek
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部