Vue/Quasar中区分用户交互与程序化模型更新的策略

// 在父组件或触发覆盖操作的地方
import { ref } from 'vue';

const model = ref({
  origin: 'domestic',
  selectedOption: 'Option 1'
});

function overwriteModel() {
  // 当程序化更新模型时，设置 overwrite 标志
  model.value = {
    origin: 'international',
    selectedOption: 'Option 2',
    overwrite: true // 标记为程序化覆盖
  };
}

<!-- src/components/MySelectComponent.vue -->
<script setup>
import { ref, watch, computed } from 'vue';

// 使用 defineModel 或 props/emits 模拟 v-model
// Quasar 2 通常使用 props 和 emits
const props = defineProps({
  modelValue: Object
});
const emit = defineEmits(['update:modelValue']);

// 内部维护一个 localModel
const localModel = ref({ ...props.modelValue });

// 监听 props.modelValue 的变化，同步到 localModel
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    localModel.value = { ...newValue };
  }
}, { deep: true });

// 当 localModel 变化时，通知父组件
watch(localModel, (newValue) => {
  emit('update:modelValue', newValue);
}, { deep: true });


watch(
  () => localModel.value.origin,
  (newOrigin, oldOrigin) => {
    // 只有当 origin 实际发生变化，并且不是由程序化覆盖触发时，才重置 selectedOption
    if (newOrigin !== oldOrigin && !localModel.value.overwrite) {
      localModel.value.selectedOption = null; // 重置下拉框
    }
    // 无论是否触发重置，都将 overwrite 标志重置为 false
    // 这样，下次用户操作时，侦听器可以正常工作
    localModel.value.overwrite = false;
  },
  { deep: true } // 深度侦听，确保能检测到内部属性变化
);
</script>

<template>
  <div>
    <q-radio
      v-model="localModel.origin"
      val="domestic"
      label="Domestic"
      @click="localModel.overwrite = false"
    />
    <q-radio
      v-model="localModel.origin"
      val="international"
      label="International"
      @click="localModel.overwrite = false"
    />

    <q-select
      v-model="localModel.selectedOption"
      :options="['Option 1', 'Option 2', 'Option 3']"
      label="Select Option"
    />
  </div>
</template>

<!-- src/components/MySelectComponent.vue (部分代码) -->
<template>
  <div>
    <q-radio
      v-model="localModel.origin"
      val="domestic"
      label="Domestic"
      @click="localModel.overwrite = false" <!-- 用户点击时重置标志 -->
    />
    <q-radio
      v-model="localModel.origin"
      val="international"
      label="International"
      @click="localModel.overwrite = false" <!-- 用户点击时重置标志 -->
    />
    <!-- ... 其他组件 ... -->
  </div>
</template>