Vue模型变更触发源判定：Quasar 2自定义组件 reactivity 异常

问题核心 #

组件内单选按钮切换时重置下拉属于预期逻辑，但通过父组件v-model批量更新单选和下拉值时，单选的监听逻辑会触发，强行将下拉值置为null，覆盖了父组件传入的下拉目标值。

解决方案 #

把依赖监听单选变化来重置下拉的逻辑，改成仅在用户手动点击单选按钮时触发重置，避免父组件批量赋值时误触发。

具体步骤 #

1. 移除监听model.type的watch逻辑
2. 给两个单选按钮添加@change事件，绑定下拉重置方法
3. 定义重置方法，仅在用户交互时清空下拉值

核心代码示例：

<template>
  <div>
    <q-radio
      v-model="model.type"
      label="Domestic"
      value="domestic"
      @change="resetOption"
    />
    <q-radio
      v-model="model.type"
      label="International"
      value="international"
      @change="resetOption"
    />
    <q-select
      v-model="model.option"
      :options="getOptions()"
      label="Options"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'

const model = defineModel()

const getOptions = computed(() => {
  return model.value.type === 'domestic'
    ? [{ label: 'Option 1', value: 'opt1' }]
    : [{ label: 'Option 2', value: 'opt2' }]
})

const resetOption = () => {
  model.value.option = null
}
</script>

原理说明 #

• 原watch逻辑会监听所有model.type的变化，包括父组件通过v-model批量赋值的场景，导致下拉被意外重置
• 改用@change事件后，只有用户手动点击单选按钮时才会触发下拉重置，父组件通过v-model更新整个对象时不会触发该交互事件，下拉值能正确保留父组件传入的内容

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