V-模型返回未定义

Question

我将

vue3

与

options api

一起使用

如下面发布的代码所示，在

toggle-button

中我有一个

v-model

vModelToggleDigitizePolygon

。每次

toggle-button

的状态改变时，都会调用

onToggleBtnDigitizePolygonChanged

并打印

vModelToggleDigitizePolygon

的值 是

undefined

我预计，每次调用

onToggleBtnDigitizePolygonChanged()

时，

vModelToggleDigitizePolygon

的值都会从

false

更改为

true

，反之亦然，但这并没有发生

请告诉我为什么

vModelToggleDigitizePolygon

的值总是

undefined

以及如何解决它

代码

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


export default {
    data() {
        return {
            isToggleBtnDigitizePolygonCheckState: false,
        };
    },
    props: {
        toggleBtnDigitizePolygonLabel: {
            type: String,
            default:
                DigitizePolygonConstants.CONST_TOGGLE_BUTTON_DIGITIZAE_POLYGON.description,
        },
        isToggleBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
        isToggleBtnDigitizePolygonChecked: {
            type: Boolean,
            default: false,
        },
    },
    emits: ['update:vModelToggleDigitizePolygon'],
    computed: {
        vModelToggleDigitizePolygon: {
            get() {
                console.log(verboseTag, 'get.vModelToggleDigitizePolygon:' + this.vModelToggleDigitizePolygon);
                return this.vModelToggleDigitizePolygon;
            },
            set(value) {
                console.log(verboseTag, 'set.vModelToggleDigitizePolygon:' + value);
                this.$emit('update:vModelToggleDigitizePolygon', value);
            },
        },
    },
    watch: {
        isToggleBtnDigitizePolygonCheckState(newVal, oldVal) {
            console.log('isToggleBtnDigitizePolygonCheckState.oldVal:', oldVal);
            console.log('isToggleBtnDigitizePolygonCheckState.newVal:', newVal);
        },
    },
    methods: {
        onToggleBtnDigitizePolygonChanged() {
            console.info(infoTag, 'onToggleBtnDigitizePolygonChanged()');
            console.info(infoTag, '():', this.vModelToggleDigitizePolygon); //<== returns undefined
            
        },
    },
    created() {
        console.log(verboseTag, 'created()');
    },
};
</script>

Answer 1

使用

modelValue

属性从父级传递

v-model

和

@change

事件来正确更新模型值。还可以使用

checked

类型输入的

checkbox

属性进行值传播。

参见演示

最少代码的解决方案：

// ToggleInput.vue
<template>
    <label>
        {{ toggleBtnDigitizePolygonLabel }}
        <input type="checkbox" :value="modelValue"
            :disabled="isToggleBtnDigitizePolygonDisabled"
            @change="$emit('update:modelValue', $event.target.checked)"
            :checked="modelValue"
        >
    </label>
</template>

<script>
export default {
    props: {
        modelValue: {
            type: Boolean,
            default: false,
        },
        toggleBtnDigitizePolygonLabel: {
            type: String,
            default: "Default Label"
        },
        isToggleBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

用法为：

// Parent.vue
<script setup>
import { ref, watch } from 'vue';
import ToggleButton from './ToggleInput.vue';
const toggle1 = ref(false)
const toggle2 = ref(true)
</script>

<template>
  <main>
    <ToggleButton v-model="toggle1" />
    {{ toggle1 }}
    <br>
    <ToggleButton v-model="toggle2" toggleBtnDigitizePolygonLabel="Checked Label" />
    {{ toggle2 }}
  </main>
</template>