VUE中对象添加属性

最新推荐文章于 2024-07-03 17:18:15 发布

feixiang3447

最新推荐文章于 2024-07-03 17:18:15 发布

阅读量1.5w

点赞数

分类专栏： VUE 文章标签：创建对象属性设置对象属性

本文链接：https://blog.csdn.net/feixiang3447/article/details/79218475

版权

本文介绍在Vue中如何为从接口获取的数据集对象动态添加属性，并将其绑定到自定义组件上。在处理过程中遇到Vue不允许直接添加对象属性的问题，通过使用`vue.set`方法成功解决，确保数据的双向绑定正常工作。

摘要由CSDN通过智能技术生成

 
 背景：在通过接口获取数据集对象后，根据业务场景需要在数据集对象上增加额外的属性 

 
 data中定义的数据集对象 
 mindData格式示例如下 

 
 mindData 
 : [

 
 {
   
 label 
 : 
 '清醒' 
 , 
 value 
 : 
 '清醒' 
 }, {
   
 label 
 : 
 '朦胧' 
 , 
 value 
 : 
 '朦胧' 
 }, 

 
 {
   
 label 
 : 
 '嗜睡' 
 , 
 value 
 : 
 '嗜睡' 
 }, {
   
 label 
 : 
 '昏睡' 
 , 
 value 
 : 
 '昏睡' 
 }, 

 
 {
   
 label 
 : 
 '谵妄' 
 , 
 value 
 : 
 '谵妄' 
 }, {
   
 label 
 : 
 '模糊' 
 , 
 value 
 : 
 '模糊' 
 }] 

 
 1)通过post调用接口获取minData对象，遍历添加属性value和content（方便后续通过v-model设置绑定radio控件的选择结果值value） 

 
 this 
 . 
 $http 
 . 
 post 
 ( 
 'XXXXXXXXXXXXXXXXXXXXXXXX' 
 , {
   

 
  
 parms 
 : 
 'xxx' 

 
 }). 
 then 
 (res => {
   

 
 let 
 sel 
 =  
 this 

 
  
 sel 
 . 
 mindData 
 = res.data 

 
  
 for 
 ( 
 let 
 item 
 of 
 sel 
 . 
 mindData 
 ) {
   

 
  
 item 
 . 
 value 
 =  
 '' 

 
 item 
 . 
 content 
 = 
 '' 

}

})

 
 2)这里我自定义了radio控件，部分代码如下 

 
 < 
 mt-cell 
 :title= 
 " 
 label 
 " 
 class= 
 "zm-radio mint-field" 
 > 

 
  
 < 
 input 
 :placeholder= 
 " 
 placeholder 
 " 

 
 type= 
 "text"

<

关注