VueJS 3自定义复选框在单击时不会更改UI答案

【问题标题】：VueJS 3 custom Checkbox not changing UI when clickedVueJS 3自定义复选框在单击时不会更改UI
【发布时间】：2022-01-11 16:34:09
【问题描述】：

我正在尝试使用 Vue 3 和 this example 之后的组合 API 创建一个自定义复选框，但即使我可以在 devtools 上看到我的所有道具和绑定数据都从父组件传递到子组件选中复选框时，复选框 UI 不会更改：

父组件：

<template>
    <div class="flex">
        <div class="flex">
            <span>Detected Language</span>
            <BaseCheckBox
                v-model:checked="translationOn"
                fieldId="translate"
                label="Translate"
                class="ml-4"
            />
        </div>
    </div>
</template>

<script>
    import BaseCheckBox from './BaseCheckBox.vue'
    import { ref } from 'vue'
    export default {
        setup() {
            const translationOn = ref(false)
            return {
                translationOn,
            }
        },
        components: { BaseCheckBox },
    }
</script>

子组件：

<template>
    <div class="flex">
        <input
            @input="(event) => $emit('update:checked', event.target.checked)"
            type="checkbox"
            :checked="checked"
            :id="fieldId"
            class="mr-2 hidden"
        />
        <label
            :for="fieldId"
            class="flex flex-row items-center cursor-pointer select-none"
        >
            <i
                class="fa mr-1"
                :class="{
                    'fa-check-square text-blue-600': checked,
                    'fa-square border-2 border-gray-700 text-white': !checked,
                }"
            ></i>
            {{ label }}
        </label>
    </div>
</template>

<script>
export default {
    props: {
        label: String,
        fieldId: {
            type: String,
            required: true,
        },
        checked: {
            type: Boolean,
        },
    },
}
</script>

每当我点击复选框时，我可以看到父级上的“translationOn”属性改变了它的值，而子级上的“checked”属性也改变了它的值，但是字体真棒类应该根据那个来切换不值：

    <i
        class="fa mr-1"
        :class="{
            'fa-check-square text-blue-600': checked,
            'fa-square border-2 border-gray-700 text-white': !checked,
        }"
    ></i>

奇怪的事情（至少对我来说）是，当我手动更改父组件这一行代码中的值时：

const translationOn = ref(true)

从“真”到“假”或反之亦然，但当我单击复选框时，即使我可以看到所有值都相应地表现，它也不起作用。

非常感谢任何帮助！谢谢！

【问题讨论】：

我用您发布的代码替换了您的示例沙箱代码。看来代码运行良好。当我单击复选框时，复选框会改变颜色。
@Ryan 能否给我发送一个指向该测试沙箱的链接，因为我的应用程序（Vue 3 + Vite + Tailwind）中有完全相同的东西并且不适合我。非常感谢！
参考codesandbox.io/embed/…
@Ryan 谢谢！仍然无法让它在我的环境中工作，真的不知道为什么它这么奇怪。单击复选框时，字体真棒类不会切换，但道具的状态正在改变。实际上，当我手动为该道具设置“假”时，FA 类将会改变。就像由于某种原因道具在我的环境中没有反应。

标签： javascript vue.js vuejs3 vue-composition-api

【解决方案1】：

于是找到了这个问题的答案here

由于某种原因，字体真棒类不是反应性的，因此忽略 vue 指令以条件渲染 html。在链接上找到答案（基本上将<i> 标签包装在<span> 标签内）。

【讨论】：