有一个v-radio-group组件:
<v-radio-group v-model=“mdl.affinity”>
<v-radio label="0">不设置</v-radio>
<v-radio label="1">硬亲和性</v-radio>
<v-radio label="2">软亲和性</v-radio>
<v-radio label="3">硬反亲和性</v-radio>
<v-radio label="4">软反亲和性</v-radio>
<v-tooltip class="store-tooltip" :content="tipNodesStore" placement="right">
<v-icon type="question-circle-o"></v-icon>
</v-tooltip>
</v-radio-group>
data中定义:
data() {
return {
mdl: {
clusterId:'',
affinity:'0'
}
}
}
created中获取从父页面传过来的数据:
props: {
item: {
type: Object,
default: {}
}
},
created() {
let _this = this;
_this.mdl = _this.item;
console.log(_this.mdl);
}
log中显示数据已经赋值成功:
但是页面没有回显数据:
所以找原因,可能有以下几个原因导致页面中的v-radio-group组件没有显示处于选中状态:
1.双向绑定问题:确保v-model="mdl.affinity"正确绑定到了this.mdl.affinity。检查this.mdl和this.item对象,确保它们是在Vue组件的数据中正确声明的,并且this.item中的affinity属性已经被正确赋值。
2.值类型匹配问题:确保this.mdl.affinity的值类型与v-radio组件的label属性值类型一致。如果label值是字符串类型,确保this.mdl.affinity也是字符串类型。如果label值是数值类型,确保this.mdl.affinity也是数值类型,并且值匹配。
3.生命周期时机问题:如果页面启动时已经给this.mdl赋值,但v-radio-group组件的渲染发生在created阶段之后,那么可能会导致初始值没有正确传递给组件。尝试将相关代码移动到mounted或updated生命周期钩子函数中,以确保组件渲染时this.mdl的值已经被赋值。
排查原因后,发现问题
父页面传过来的item.affinity值是数值类型,而我定义的是字符串类型,所以修改为数值类型。
以及莫名其妙的v-tooltip组件放在v-radio-group中就不显示,移到外面就显示;用data 属性来初始化渲染radio项。
最后修改完的代码:
<v-radio-group v-model="mdl.affinity" :data="dataAffi"></v-radio-group>
<v-tooltip class="store-tooltip tooltip-question" :content="tipNodesStore" placement="right">
<v-icon type="question-circle-o"></v-icon>
</v-tooltip>
data() {
return {
mdl: {
clusterId: '',
affinity: 0
},
dataAffi: [
{value: 0, text: '不设置'},
{value: 1, text: '硬亲和性'},
{value: 2, text: '软亲和性'},
{value: 3, text: '硬反亲和性'},
{value: 4, text: '软反亲和性'},
]
}
}
页面成功回显。