当前位置:首页 > 天道酬勤 > 正文内容

vuex的五个属性(vue获取对象的属性名)

张世龙2021年12月21日 05:46天道酬勤580

将属性更改为

一、背景

props或data观测到的对象时,不能直接更改属性。 必须使用Vue.set方法。

Vue.set方法更改对象的属性。 如果要添加属性的对象具有响应性,该方法可以在触发视图更新的同时确保属性在创建后仍具有响应性。

二、基础知识

注:要修改的对象必须是响应对象。 此外,触发视图更新的操作响应对象的属性也必须是响应对象。 浏览器JS无法解析,报告错误。

三、示例代码

在此定义用两个不同的按钮控制列表数据的列表数据。

//1 .首先将Vuejs文件库导入页面

导入从' vue ' div id='应用程序2 '

v-for=' iteminitems ' :密钥=' item.id '

item.message

/p

button类=' BTN ' @ click=' BTN2click () '动态赋值/buttonbr/

/button类=' BTN ' @ click=' BTN3click () '将属性/button添加到数据中

/div

脚本

导出默认值{

数据()。

items:[

“消息:‘测试一次’,id :‘1’”,

{消息: '测试two ',id:'2'} ',

消息: '测试树',id:'3'}'

]

(、

方法:

btn2点击:功能(

VUE.set(this.items,0,{消息: '更改测试',id:'10'} ' )

(、

btn3点击:功能(

var itemLen=this.items.length;

vue.set (项目指示灯,消息: '测试添加指示灯,id :项目指示灯);

}

}

);

/脚本 )。

单击第一个按钮后,运行methods的btn2Clcick方法,将Test one更改为Change Test。

需要注意的是,写惯JS后,可能会想改变数组中某个下标中的数据。 直接将this.items[XX]改为以下内容:

btn2点击:功能(

this.items [0]={消息3360 '变更测试',id:'10'} '

}进入控制台进行检查后,发现:

这是Vue文档中明确指出的注意事项,由于JavaScript的限制,Vue无法检测到数据的变更(脏数据),因此需要动态变更数据时,为Vue.set ) )是我们的需求

点击【向data添加属性】按钮,浏览控制台:

可以看到,Vue.set () )不仅可以修改对象数据的属性,还可以添加对象数据的属性,以弥补Vue数组方法的不足。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/26125.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。