Quasar多v-model绑定下单选按钮无法切换状态问题

核心问题点 #

1. 子组件Props定义错误：多v-model绑定的每个字段需要对应单独的props，而非统一用modelValue。
2. q-option-group的value绑定错误：子组件里绑定的optionsSkin未定义，且未关联到父组件传递的状态。
3. @input事件处理错误：Quasar的q-option-group的input事件返回的是选中值本身，不是原生DOM事件，无需$event.target.value。
4. 父组件初始状态未同步：newSettings的初始值未从默认设置同步，导致子组件初始选中状态异常。

具体修复步骤 #

1. 修改父组件：初始化newSettings的默认值

在chartSet方法里同步默认值到newSettings，确保子组件初始状态正确：

// Parent component - script部分
methods: {
  chartSet() {
    const defaultSettings = getDefaultChartSettings();
    this.chartSettings.skin = defaultSettings.skin;
    this.chartSettings.options = defaultSettings.options;
    // 同步默认值到newSettings，子组件v-model绑定的是这个
    this.newSettings.optionsSkin = defaultSettings.skin;
    this.newSettings.optionsLeg = defaultSettings.options;
  },
},

2. 修改子组件：修正Props定义

删除无用的modelValue prop，添加多v-model对应的两个prop：

// Child component - script部分
props: {
  default: {
    type: Object,
    default: () => ({ skin: '', options: [] }),
  },
  // 对应父组件的v-model:optionsSkin
  optionsSkin: {
    type: String,
    default: '',
  },
  // 对应父组件的v-model:optionsLeg
  optionsLeg: {
    type: Array,
    default: () => [],
  },
},
emits: ['update:optionsSkin', 'update:optionsLeg'],

3. 修正子组件q-option-group的绑定与事件处理

• :value直接绑定到对应的prop
• @input直接传递选中值，不需要$event.target.value

// Child component - template部分
<q-option-group
  :options="settings.optionsSkin"
  :value="optionsSkin"
  type="radio"
  @input="$emit('update:optionsSkin', $event)"
/>
<q-option-group
  :options="settings.optionsLeg"
  :value="optionsLeg"
  type="checkbox"
  @input="$emit('update:optionsLeg', $event)"
/>

4. 移除子组件无用的newSettings数据

因为现在直接通过props和emit与父组件同步状态，子组件的newSettings可以删除：

// Child component - script部分
data() {
  return {
    enableApply: true,
    settings: {
      optionsSkin: [],
      optionsLeg: [],
    },
    // 移除newSettings
  };
},
// 同时删除setDefaultSettings方法，因为不再需要
created() {
  this.setSkinOptions();
  this.setLegOptions();
},
methods: {
  // 删除setDefaultSettings方法
  setSkinOptions() {
    const skinOptions = getSkinOptions();
    this.settings.optionsSkin = skinOptions?.length
      ? skinOptions.map((sO) => ({ label: sO.alias, value: sO.title }))
      : [];
  },
  setLegOptions() {
    const legOptions = getLegOptions();
    this.settings.optionsLeg = legOptions?.length
      ? legOptions.map((lO) => ({ label: lO.alias, value: lO.title }))
      : [];
  },
  apply(e) {
    this.$emit('apply-button-click', e.target.value);
  },
},

修复原理说明 #

• 多v-model绑定的本质是：v-model:xxx="parentValue" 等价于 :xxx="parentValue" @update:xxx="parentValue = $event"，所以子组件必须定义对应的xxx prop，并触发update:xxx事件传递新值。
• Quasar的q-option-group组件会在用户选择时直接返回选中的value作为input事件的参数，无需解析原生DOM事件。
• 父组件初始化时同步默认值到newSettings，确保子组件渲染时就有正确的选中状态。

内容的提问来源于stack exchange，提问作者john