vue 数据联动 使用computed 监听 el-radio-group v-model的数据

Vue.js 中，当你需要实现数据联动，特别是在 `el-radio-group` 组件上监听 `v-model` 的变化，并基于此更新其他数据时，可以使用 `Computed` 来轻松管理。`Computed` 是 Vue 提供的一种计算属性，它可以根据其依赖的数据动态地生成值。

首先，在 Vue 实例中定义一个 `Computed` 对象，假设我们有一个名为 `selectedOptionValue` 的 computed，它会监听 `radioGroupValue`：

data() {
  return {
    radioOptions: [
      { value: 'option1', label: '选项一' },
      { value: 'option2', label: '选项二' },
      // 更多选项...
    ],
    selectedOptionValue: '', // 初始值为空
  };
},
computed: {
  radioGroupValue: {
    get() {
      return this.$refs.radioGroup.value; // 获取 radio group 的选中值
    },
    set(newVal) {
      this.selectedOptionValue = newVal; // 当 radio group 的值改变时，设置 selectedOptionValue
    },
  },
},
methods: {
  handleRadioChange(event) {
    this.radioGroupValue = event.target.value; // 当用户手动选择 radio 时，触发 change 事件
  }
},
template: `
<el-radio-group ref="radioGroup" v-model="radioGroupValue">
  <el-radio v-for="option in radioOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio>
</el-radio-group>
`,

在这个例子中，当用户选择 radio 或者通过 `handleRadioChange` 方法更改 `radioGroupValue` 时，`selectedOptionValue` 会自动更新。这样就实现了 data 的联动。