将复选框控件modelValue发送回父控件vue3

Question

我有一个复选框的包装控件，与我的文本框控件非常相似。这样做，验证和设计将始终保持一致。我让它适用于文本框，但选中的布尔值会导致复杂性。

使用emit-vue3 typescript 在子级和父级之间双向绑定数据

<template>
<label class="checkCtrl">
<input
role="checkbox"
aria-disabled="false"
aria-readonly="false"
type="checkbox"
v-model="checked"
v-on:change="change($event)"
/>
<span><LocCtrl :page="page" :loc-key="labelLoc" /></span>
</label>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useModelWrapper } from "../utils/modelWrapper";
import LocCtrl from "../components/LocCtrl.vue";
import Locale from "@/services/Locale";
export default defineComponent({
name: "CheckCtrl",
components: {
LocCtrl,
},
props: {
labelLoc: {
type: String,
required: true,
},
modelValue: {
type: String,
required: true,
},
page: {
type: String,
required: true,
}
},
setup(props, { emit }) {
const value = useModelWrapper(props, emit, "value");
return {
value: value,
checked: value.value == "true"
}
},
methods: {
getLoc(locKey: string): string {
return Locale.getItem(this.page, locKey);
},
change(e: Event): void {
if (e) {
this.value = (e.target as HTMLInputElement).checked ? "true" : "false";
this.$emit('update:modelValue',  this.value);
alert(this.value);
}
}
},
});
</script>

这是模型包装器，适用于文本框，但不适用于此

import { computed } from "vue";
export function useModelWrapper(
props: { [x: string]: any },
emit: (arg0: string, arg1: any) => void,
name = "modelValue"
) {
return computed({
get: () => {
return props[name];
},
set: (value: string) => {
return emit("update:" + name, value)
}
});
}

在父对象中，我将v模型传递给控件。字符串"真"；或"；false"；是预期的值(如果我们需要的话，我可能会使其可配置(。

<FormLine className="forCheck" form-line="3">
<CheckCtrl v-model="claim.resultOfAccident" labelLoc="RoA" page="claims3View"/>
</FormLine>

Answer 1

好的，我再次找到了自己问题的答案，但我希望它能帮助其他人：

change(e: Event): void {
if (e) {
const value = (e.target as HTMLInputElement).checked ? "true" : "false";
this.$emit('update:modelValue', value);
}
}

this.value在原始代码中不正确。