背景:
在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性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对象上,显示效果是能获得期望结果,那问题很明显,对象属性的创建有问题
data() {
return{
mindRadio: {
code:'',value:''
}
}
经过vue官方资料查询,提供了vue.set方法,通过以下方法解决了设置对象属性的问题