如何从 html checked="checked" 初始化 VueJs 复选框状态

Question

在表单中包含此复选框（+ 文本区域）

<save-numbers id="save-numbers" inline-template>
    <div>
        <label class="inline-block text-gray-500 font-bold mb-4">
            <input class="mr-2 leading-tight" type="checkbox" name="saveNumbers" id="saveNumbers" v-model="toggle" {{ old('saveNumbers') ? 'checked' : '' }}/>
        </label>
        <div>
            <textarea 
            :class="{ hidden: !toggle }"
            class="w-full bg-gray-200 text-gray-700 border @error('notes') border-red-500 @enderror rounded py-3 px-4 mb-3 focus:outline-none focus:bg-white" 
            name="notes" id="notes" cols="30" rows="1" 
            placeholder="Add some notes">{{ old('notes', $validatedData['notes'] ?? '') }}</textarea>
        </div>
    </div>
</save-numbers>

如何在表单验证失败时初始化/更新页面加载数据，以便选中复选框？默认情况下不选中，但如果表单失败并且选中了复选框，则在 VueJs 组件中未设置选中属性。

这是 VueJs 代码

if (document.getElementById("save-numbers")) {
    Vue.component('save-numbers', {
        mounted: () => {

        },
        data() {
            return {
                title: 'Check me',
                toggle: false,
            }
        },
        methods: {
        },
    });

    new Vue({ el: '#save-numbers' })
}

我想检测是否设置了检查属性并相应地更新切换。

谢谢

Answer 1

data() {
    return {
        title: 'Check me',
        toggle: false,
        isChecked: true,
    }
},

返回一个布尔值

 <label class="inline-block text-gray-500 font-bold mb-4">
            <input class="mr-2 leading-tight" type="checkbox" name="saveNumbers" id="saveNumbers" v-model="toggle" {{ old('saveNumbers') ? 'checked' : '' }}/>
       checked="isChecked" </label>

Answer 2

最后我使用纯 js 在页面加载时获取复选框的选中状态，但希望有更多“vuesc”方式来做到这一点。

Vue.component('save-numbers', {
        data() {
            return {
                toggleNotes: document.getElementById('saveNumbers').checked,
            }
        },
        methods: {
        },
    });