Vue3 Options API中v-model返回undefined问题排查与修复

核心问题分析 #

1. 计算属性无限递归导致值为undefined
   你的计算属性vModelToggleDigitizePolygon的get方法中，直接返回了this.vModelToggleDigitizePolygon，这会触发自身的getter无限递归，最终无法返回有效数值，只会得到undefined。

2. checkbox状态与v-model未正确绑定

   • checkbox的:checked绑定的是propsisToggleBtnDigitizePolygonChecked，但这个props和你的v-model计算属性完全脱节，导致v-model无法同步勾选状态。
   • @input事件发射的是$event.target.value，但checkbox的勾选状态应该用$event.target.checked获取，value属性在这里并没有实际作用。

3. 缺少v-model对应的prop定义
   按照Vue自定义v-model的规范，子组件必须定义与v-model名称匹配的prop（即vModelToggleDigitizePolygon），但你的props中没有这个属性，导致计算属性没有正确的数据源。

修复步骤 #

1. 添加v-model对应的prop并修正计算逻辑 #

首先在props中添加vModelToggleDigitizePolygon，如果不需要额外的状态处理，甚至可以直接用prop配合@input发射事件，省去计算属性：

props: {
    // ... 保留原有props
    vModelToggleDigitizePolygon: {
        type: Boolean,
        default: false
    }
}

2. 修正checkbox的模板绑定 #

将checkbox的:checked绑定到v-model对应的prop，同时修改@input事件传递正确的勾选状态：

<input
    type="checkbox"
    :disabled="isToggleBtnDigitizePolygonDisabled"
    :checked="vModelToggleDigitizePolygon"
    @input="$emit('update:vModelToggleDigitizePolygon', $event.target.checked)"
    @change="onToggleBtnDigitizePolygonChanged()"
/>

3. 调整方法中的取值逻辑 #

在onToggleBtnDigitizePolygonChanged中直接使用修正后的v-model属性即可获取正确的布尔值：

methods: {
    onToggleBtnDigitizePolygonChanged() {
        console.info(infoTag, 'onToggleBtnDigitizePolygonChanged()');
        console.info(infoTag, '():', this.vModelToggleDigitizePolygon); // 现在会返回true/false
    }
}

完整修正代码示例 #

<template>
    <cds-toggle id="idToggleBtnDigitizePolygon" class="clsToggleBtnDigitizePolygon">
        <label for="toggling-digitization-of-polygon-on-and-off">
            {{ toggleBtnDigitizePolygonLabel }}
        </label>
        <input
            type="checkbox"
            :disabled="isToggleBtnDigitizePolygonDisabled"
            :checked="vModelToggleDigitizePolygon"
            @input="$emit('update:vModelToggleDigitizePolygon', $event.target.checked)"
            @change="onToggleBtnDigitizePolygonChanged()"
        />
    </cds-toggle>
</template>

<script>
import ClsDigitizePolygonInteractions from '../../map/classes/PolygonDigitization/ClsDigitizePolygonInteractions.js'
import { SysConstants } from '../../map/assets/System/SysConstants.js';
import { DigitizePolygonConstants } from './resources/DigitizePolygonConstants.js';
import { InjectionKeys } from '../../map/assets/System/InjectionKeys.js';

const verboseTag = 'VERBOSE';
const infoTag = 'INFO';

export default {
    data() {
        return {
            // 若未使用可移除该属性
            // isToggleBtnDigitizePolygonCheckState: false,
        };
    },
    props: {
        toggleBtnDigitizePolygonLabel: {
            type: String,
            default:
                DigitizePolygonConstants.CONST_TOGGLE_BUTTON_DIGITIZAE_POLYGON.description,
        },
        isToggleBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
        vModelToggleDigitizePolygon: {
            type: Boolean,
            default: false
        },
    },
    emits: ['update:vModelToggleDigitizePolygon'],
    watch: {
        vModelToggleDigitizePolygon(newVal, oldVal) {
            console.log('vModelToggleDigitizePolygon.oldVal:', oldVal);
            console.log('vModelToggleDigitizePolygon.newVal:', newVal);
        },
    },
    methods: {
        onToggleBtnDigitizePolygonChanged() {
            console.info(infoTag, 'onToggleBtnDigitizePolygonChanged()');
            console.info(infoTag, '():', this.vModelToggleDigitizePolygon);
        },
    },
    created() {
        console.log(verboseTag, 'created()');
    },
};
</script>

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