背景：在通过接口获取数据集对象后，根据业务场景需要在数据集对象上增加额外的属性
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"
:readonly=
"
!
editable
"
style=
"margin-right: 14px;"
v-model=
"
currentContent
"
@click=
"
onHandleClick
"
class=
"mint-field-core"
/>
<
span
class=
"mintui mintui-back reset"
@click=
"
popupVisible
=
true
"
></
span
>
<
mt-popup
class=
"zm-radio-popup"
position=
"bottom"
v-model=
"
popupVisible
"
popup-transition=
"popup-fade"
:style=
"
{
height
:
popupHeight
}
"
ref=
"
pop
"
>
<
zm-container
>
<
zm-main
ref=
"zmRadioMain"
>
<
div
@click=
"
popupVisible
=
false
"
>
<
mt-radio
style=
"width: 100%"
:title=
"
label
"
align=
"right"
v-model=
"
currentValue
"
:options=
"
options
"
>
</
mt-radio
>
</
div
>
</
zm-main
>
</
zm-container
>
</
mt-popup
>
</
mt-cell
>
export default
{
watch
: {
popupVisible
() {
this
.
options
=
this
.
dictItems
this
.
currentValue
=
this
.
value
let
height
=
this
.
options
.length *
48
let
maxHeight
=
window
.innerHeight *
0.5
if
(
height
>
maxHeight
) {
this
.
popupHeight
=
maxHeight
+
'px'
let
scrollHeight
=
maxHeight
*
maxHeight
/
height
this
.$refs.zmRadioMain.
setScroll
(
scrollHeight
,
window
.innerWidth)
}
},
currentValue
() {
console
.
log
(
'radio_currentValue:'
+
this
.
currentValue
)
this
.
$emit
(
'input'
,
this
.
currentValue
)
let
content
=
this
.
content
let
label
=
''
for
(
let
item
of this
.
options
) {
if
(_.
isEqual
(
item
.
value
,
this
.
currentValue
)) {
label
=
item
.
label
break
}
}
this
.
currentContent
=
content
}
2)绑定到自定义的radio控件上
<
zm-radio
label=
"单选："
:editable=
"
false
"
:dict-data=
"
mindData
"
:content.sync=
"
data
.
content
"
v-model=
"
data
.
value
"
></
zm-radio
>
赋值的关键代码如下
watch
: {
popupVisible
() {
this
.
options
=
this
.
dictItems
this
.
currentValue
=
this
.
value
弹出选项框列表的时候，会把当前文本上的value值赋值给currentValue对象，这样下拉框就会自动定位显示原先的选项值，期望达到的效果如下
乍看之下，没什么问题，运行后发现
点击下拉框，弹出选项列表，怎么数据没有通过v-model绑定上去,并且radio的value和lable值一直是空
捣鼓了很久，测试发现通过定义mindRadio对象的方式绑定在zm-radio对象上，显示效果是能获得期望结果，那问题很明显，对象属性的创建有问题
<
zm-radio
label=
"单选："
:editable=
"
false
"
:dict-data=
"
mindData
"
:content.sync=
"
mindRadio
.
content
"
v-model=
"
mindRadio
.
value
"
></
zm-radio
>
data
() {
return
{
mindRadio
: {
code
:
''
,
value
:
''
}
}
经过vue官方资料查询，提供了vue.set方法,通过以下方法解决了设置对象属性的问题
this
.
$http
.
post
(
'XXXXXXXXXXXXXXXXXXXXXXXX'
, {
parms
:
'xxx'
}).
then
(res => {
let
sel
=
this
sel
.
mindData
= res.data
for
(
let
item
of
sel
.
mindData
) {
sel
.$set(
item
,
'value'
,
''
)
sel
.$set(
item
,
'content'
,
''
)
}
})
总结原因：
其实问题是vue实例对象不允许直接添加属性或删除属性，需要通过set方式更新数据对象。
另一种实现方式
，可以采用先给临时对象tempData添加属性，再赋值给mindData