对VUE中的对象添加属性

背景：

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

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

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

export default{
watch: {
popupVisible() {
this.options= this.dictItems
this.currentValue= this.value
letheight= this.options.length 48
letmaxHeight= window.innerHeight 0.5
if(height> maxHeight) {
this.popupHeight= maxHeight+ 'px'
letscrollHeight= maxHeight* maxHeight/ height
this.$refs.zmRadioMain.setScroll(scrollHeight,window.innerWidth)
}
},currentValue() {
console.log('radiocurrentValue:'+ this.currentValue)
this.$emit('input',this.currentValue)
letcontent= this.content
letlabel= ''
for(letitemof this.options) {
if(.isEqual(item.value,this.currentValue)) {
label= item.label
break
}
}
this.currentContent= content
}

3) 绑定到自定义的radio控件上

赋值的关键代码如下

弹出选项框列表的时候，会把当前文本上的value值赋值给currentValue对象，这样下拉框就会自动定位显示原先的选项值，期望达到的效果如下

乍看之下，没什么问题，运行后发现

点击下拉框，弹出选项列表，怎么数据没有通过v-model绑定上去,并且radio的value和lable值一直是空

捣鼓了很久，测试发现通过定义mindRadio对象的方式绑定在zm-radio对象上，显示效果是能获得期望结果，那问题很明显，对象属性的创建有问题

经过vue官方资料查询，提供了vue.set方法,通过以下方法解决了设置对象属性的问题

总结原因：

另一种实现方式，可以采用先给临时对象tempData添加属性，再赋值给mindData

以上这篇对VUE中的对象添加属性就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!