Vue3 Options API下Checkbox状态不更新问题排查与解决

我使用Vue3 Options API开发时，遇到一个问题：代码中的checkbox在勾选时会执行onCheckboxGeoTIFFOverlayBandAveragesChanged()方法，但多次勾选/取消后，日志里的isCheckboxGeoTIFFOverlayBandAveragesChecked值始终为false。

代码示例:

<template>
    <cds-checkbox id="idCheckboxGeoTIFFOverlayBandAveragesContainer">
        <label id="idTextGeoTIFFOverlayBandAverages">{{ tempTextBandAverages }}</label>
        <input
            type="checkbox"
            :value="compPropsVModelCheckGeoTIFFOverlayBandAverages"
            @input="$emit('update:compPropsVModelCheckGeoTIFFOverlayBandAverages', $event.target.checked)"
            :disabled="isCheckboxGeoTIFFOverlayBandAveragesDisabled"
            :checked="isCheckboxGeoTIFFOverlayBandAveragesChecked"
            @change="onCheckboxGeoTIFFOverlayBandAveragesChanged"
        />
    </cds-checkbox>
</template>

<script>
import { GeoTIFFOverlaySettingsConstants } from '../../../resources/GeoTIFFOverlaySettings/GeoTIFFOverlaySettingsConstants.js';

let msg = null;

export default {
    name: 'SentinelHubGeoTIFFOverlayBand1',
    data() {
        return {
            tempTextBandAverages: GeoTIFFOverlaySettingsConstants.CONST_STRING_BAND_1_AVERAGES.description,
        };
    },
    components: {},
    props: {
        isCheckboxGeoTIFFOverlayBandAveragesChecked: {
            type: Boolean,
            default: false,
        },
        isCheckboxGeoTIFFOverlayBandAveragesDisabled: {
            type: Boolean,
            default: false,
        },
        vModelCheckGeoTIFFOverlayBandAverages: {
            type: Boolean,
            default: null,
        },
    },
    emits: {
        'update:vModelCheckGeoTIFFOverlayBandAverages': null,
    },
    computed: {
        compPropsVModelCheckGeoTIFFOverlayBandAverages: {
            get() {
                return this.vModelCheckGeoTIFFOverlayBandAverages;
            },
            set(value) {
                this.$emit('update:vModelCheckGeoTIFFOverlayBandAverages', value);
            },
        },
    },
    methods: {
        onCheckboxGeoTIFFOverlayBandAveragesChanged() {
            msg = JSON.stringify({msg:verboseTag + '@watch.', isChecked: this.isCheckboxGeoTIFFOverlayBandAveragesChecked});
            console.log(msg);
        },
    },
};
</script>

原因分析 #

• 状态绑定冲突：同时用:checked绑定isCheckboxGeoTIFFOverlayBandAveragesChecked props，又通过@input事件更新vModelCheckGeoTIFFOverlayBandAverages，两个状态无关联，导致组件内读取的isCheckboxGeoTIFFOverlayBandAveragesChecked未随勾选动作更新。
• 单向数据流未同步：Vue props是单向数据流，父组件未将vModelCheckGeoTIFFOverlayBandAverages的变化同步到isCheckboxGeoTIFFOverlayBandAveragesChecked，该props值一直停留在初始的false。
• 事件触发时机问题：@change事件触发时，props的更新可能还未完成，此时读取到的是旧值。

解决办法 #

方案一：统一使用v-model简化绑定 #

移除冗余的:checked和@input绑定，直接用计算属性的v-model控制勾选状态，同时读取v-model属性获取当前状态：

1. 修改模板中的input标签：

<input
    type="checkbox"
    v-model="compPropsVModelCheckGeoTIFFOverlayBandAverages"
    :disabled="isCheckboxGeoTIFFOverlayBandAveragesDisabled"
    @change="onCheckboxGeoTIFFOverlayBandAveragesChanged"
/>

2. 修改方法中的状态读取：

onCheckboxGeoTIFFOverlayBandAveragesChanged() {
    const msg = JSON.stringify({msg: verboseTag + '@watch.', isChecked: this.vModelCheckGeoTIFFOverlayBandAverages});
    console.log(msg);
}

3. （可选）若isCheckboxGeoTIFFOverlayBandAveragesChecked props无其他用途，可直接删除，统一用vModelCheckGeoTIFFOverlayBandAverages控制勾选状态。

方案二：直接获取事件中的真实状态 #

若需保留现有props结构，在@change事件中直接获取checkbox的当前勾选状态，不依赖props：

1. 修改模板的change事件：

@change="onCheckboxGeoTIFFOverlayBandAveragesChanged($event.target.checked)"

2. 修改方法接收参数：

onCheckboxGeoTIFFOverlayBandAveragesChanged(isChecked) {
    const msg = JSON.stringify({msg: verboseTag + '@watch.', isChecked: isChecked});
    console.log(msg);
}

这样可直接拿到勾选动作后的真实状态，不受props更新延迟影响。

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