vue获取data中数组的value值_控制台修改vue组件中data对象里的数组意外失效

在Vue.js学习过程中,发现修改data对象内的数组不会立即更新视图,除非使用Vue.set()。例如,直接修改arrs数组元素无效,而修改其他属性后,数组元素会随之更新。解决方案是利用Vue.set确保数组变化的响应性。
摘要由CSDN通过智能技术生成

摘要:

最近在学习Vue.js,其语法很像angularjs。然后在学习过程中遇到一些奇怪的事情,比如这篇提到的:修改data对象里面的数组,有的成功有的意外失效......

一、发现

最近在看Vue.js,然后发现data对象里面的属性并非都可以通过控制台来更新!

按照官方的说法:每个 Vue实例都会代理其 data对象里所有的属性,注意只有这些被代理的属性是响应的......配图一张:

然后艺灵就按照此示例练习了下,最终的结果有点出人意料之外。话不多说,上代码。

二、示例代码

2.1、js源码

var app=new Vue({

el:'#app',

data:{

a:1,

b:'',

items:[

{text:'i0'},

{text:'i1'},

{text:'i2'}

],

todos:{

text1:'t1',

text2:'t2',

text3:'t3'

},

arrs:[

'Do the dishes',

'Take out the trash',

'Mow the lawn'

]

}

});

为了更直观的看到效果,有必要在页面中显示下data

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值