可能的解决方案如下:

  1. 在数据回显时,手动设置当前选中的选项,例如:
<vxe-radio-group v-model="selected">
  <vxe-radio :label="1">选项一</vxe-radio>
  <vxe-radio :label="2">选项二</vxe-radio>
  <vxe-radio :label="3">选项三</vxe-radio>
</vxe-radio-group>

<script>
export default {
  data() {
    return {
      selected: null // 初始值为空
    }
  },
  mounted() {
    // 后端传来的数据
    const data = { selected: 2 }
    // 设置选中的选项
    this.selected = data.selected
  }
}
</script>
  1. 使用 vxe-radio-groupoptions 属性,将选项和对应的值传递进去,然后在回显数据时,通过循环匹配选项的值来设置当前选中的选项,例如:
<vxe-radio-group v-model="selected" :options="options"></vxe-radio-group>

<script>
export default {
  data() {
    return {
      selected: null, // 初始值为空
      options: [
        { label: '选项一', value: 1 },
        { label: '选项二', value: 2 },
        { label: '选项三', value: 3 }
      ]
    }
  },
  mounted() {
    // 后端传来的数据
    const data = { selected: 2 }
    // 匹配选项的值,设置选中的选项
    this.options.forEach(option => {
      if (option.value === data.selected) {
        this.selected = option.value
      }
    })
  }
}
</script>
``
vxe-radio-group 接收后端数据点击后才回显数据问题解决

原文地址: https://www.cveoy.top/t/topic/d5om 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录