Vue.js3将值从函数传递到复选框输入的标签，并根据复选框的布尔值更改标签

Question

<template>
<div>
<input @change="change($event)"  type="checkbox" id="check" v-model="checked" class="toggle" />
<label for="check" >{{ status }}</label>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface Props {
status?: string
}
const props = withDefaults(defineProps<Props>(), {
status: "Locked",
});
const checked = ref(false)
let status = "";
const change = () => {

if(checked.value === true) {
status="Locked"
} else {
status="Unlocked"
}
console.log(checked.value, status)
}
</script>

(使用组合api w/setup)控制台日志(选中)。value, status)返回正确的信息，我只是不知道如何使用状态作为标签，并在单击复选框时改变它。

期望的动作是:

• 检查。Value = true;status = "Unlocked"<——作为标签

  显示

• 检查。Value = false;状态="Locked"<——作为标签

  显示

如有任何建议，不胜感激。

Answer 1

status也应该是一个响应变量:

const status = ref("");

并通过

重新分配内容

status.value = 'locked';

请记住，你想在模板中显示的每个变量都必须是响应式的。