Vue3中修复‘Invalid assignment target’错误（Vite+Quasar场景）

问题说明 #

使用Vite + Quasar构建Vue 3应用时，在子组件模板中给QCheckbox的v-model绑定data.gps?.enable，触发了**"Invalid assignment target"**错误。

错误代码示例 #

<template>
  <QCheckbox 
    v-model="(data.gps?.enable)" 
    class="q-mt-none" 
    label="GPS Only Tracking Enabled " />
</template>

<script setup lang="ts">
  import Vue from "vue";
  import {defineComponent } from "vue";
  import * as types from "../../../types";
  
  const props = defineProps({
    modalProps: Object as () => types.Itarget
  });
  
  const defaults = {
      gps: props.modalProps?.gps,
  };
  let data = ref(_.cloneDeep(defaults));
</script>

gps对象结构：

gps: {
  enable: true,
  perform?: 'Normal',
  distance?: 33
}

报错原因 #

v-model是语法糖，底层会对绑定目标执行赋值操作（例如data.gps.enable = $event）。但可选链操作符?.返回的是表达式的计算结果，并非可赋值的引用，因此无法作为v-model的绑定目标，导致报错。

解决方案 #

方案1：确保data.gps始终存在 #

如果业务逻辑中data.gps不会为undefined，可直接移除可选链，并在初始化时给gps设置默认值，避免潜在的undefined：

<template>
  <QCheckbox 
    v-model="data.gps.enable" 
    class="q-mt-none" 
    label="GPS Only Tracking Enabled " />
</template>

<script setup lang="ts">
  import Vue from "vue";
  import {defineComponent } from "vue";
  import * as types from "../../../types";
  
  const props = defineProps({
    modalProps: Object as () => types.Itarget
  });
  
  // 初始化时给gps设置默认值
  const defaults = {
      gps: props.modalProps?.gps || { enable: false, perform: 'Normal', distance: 33 },
  };
  let data = ref(_.cloneDeep(defaults));
</script>

方案2：使用计算属性处理（适配gps可能为空的场景） #

如果data.gps确实可能为undefined，可以通过计算属性的get和set方法封装逻辑，既处理可选链取值，又支持赋值：

<template>
  <QCheckbox 
    v-model="gpsEnable" 
    class="q-mt-none" 
    label="GPS Only Tracking Enabled " />
</template>

<script setup lang="ts">
  import Vue from "vue";
  import {defineComponent, ref, computed} from "vue";
  import * as types from "../../../types";
  
  const props = defineProps({
    modalProps: Object as () => types.Itarget
  });
  
  const defaults = {
      gps: props.modalProps?.gps,
  };
  let data = ref(_.cloneDeep(defaults));

  // 定义计算属性处理取值和赋值逻辑
  const gpsEnable = computed({
    get() {
      return data.value.gps?.enable ?? false; // 给默认值避免返回undefined
    },
    set(newValue) {
      // 如果gps不存在则先初始化
      if (!data.value.gps) {
        data.value.gps = { enable: false, perform: 'Normal', distance: 33 };
      }
      data.value.gps.enable = newValue;
    }
  });
</script>

方案3：手动实现v-model逻辑 #

绕开v-model语法糖，用v-bind绑定值，@update:model-value监听变化并手动处理赋值：

<template>
  <QCheckbox 
    :model-value="data.gps?.enable ?? false"
    @update:model-value="handleGpsEnableChange"
    class="q-mt-none" 
    label="GPS Only Tracking Enabled " />
</template>

<script setup lang="ts">
  import Vue from "vue";
  import {defineComponent, ref} from "vue";
  import * as types from "../../../types";
  
  const props = defineProps({
    modalProps: Object as () => types.Itarget
  });
  
  const defaults = {
      gps: props.modalProps?.gps,
  };
  let data = ref(_.cloneDeep(defaults));

  const handleGpsEnableChange = (newValue: boolean) => {
    // 初始化gps（如果不存在）
    if (!data.value.gps) {
      data.value.gps = { enable: false, perform: 'Normal', distance: 33 };
    }
    data.value.gps.enable = newValue;
  };
</script>

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