使用v-radio-group组件不回显数据问题

爱被打了一巴掌 2023-10-14 08:53 25阅读 0赞

有一个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中显示数据已经赋值成功：![19478ceac77e45d69f678b615daf8f69.png][]

但是页面没有回显数据：![2ec1b215287543fc8ca90bcda1b350ce.png][]

所以找原因，可能有以下几个原因导致页面中的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: '软反亲和性'},
       ]
      }
    }

页面成功回显。

[19478ceac77e45d69f678b615daf8f69.png]: https://img-blog.csdnimg.cn/19478ceac77e45d69f678b615daf8f69.png
[2ec1b215287543fc8ca90bcda1b350ce.png]: https://img-blog.csdnimg.cn/2ec1b215287543fc8ca90bcda1b350ce.png