单击时 VueJS 3 自定义复选框不更改 UI

Question

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

Parent分量：

<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>

Child分量：

<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>

每当我单击复选框时，我都可以看到 parent 上的“translationOn”属性改变了它的值，children 上的“checked”属性改变了它的值也是，但是应该根据该值切换的 font-awesome 类不会：

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

奇怪的是（至少对我而言）是当我在 parent 组件的这一行中手动更改代码中的值时：

const translationOn = ref(true)

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

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

Answer 1

找到了这个问题的答案

出于某种原因，超棒的字体类不是响应式的，因此忽略 vue 指令以有条件地呈现 html。在 link.

上找到答案（基本上将 <i> 标签包裹在 <span> 标签内）

单击时 VueJS 3 自定义复选框不更改 UI

VueJS 3 custom Checkbox not changing UI when clicked

javascript

vue.js

vuejs3

vue-composition-api