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) console.log(checked.value, status) returns 正确的信息，我就是想不通了解如何使用状态作为标签，并在单击复选框时更改它。

所需的操作是：

checked.value = 真； status = "Unlocked" <--显示为标签
checked.value = 假； status="Locked" <--显示为标签

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

Answer 1

状态也应该是一个反应变量：

const status = ref("");

和re-assign内容来自

status.value = 'locked';

请记住，您要在模板中显示的每个变量都必须是反应式的。

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

Vue.js3 Passing value from function to label for checkbox input, and have label change based upon the boolean of the checkbox

vue.js

label

vuejs3