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

Posted 2023-02-22

【中文标题】如何从 html checked="checked" 初始化 VueJs 复选框状态

【英文标题】：How do I initialize VueJs checkbox state from html checked="checked"

【发布时间】：2020-09-29 05:35:39

【问题描述】：

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

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

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

谢谢

【问题讨论】：

用适当的值初始化toggle

我不知道该怎么做。你有文档的链接吗？

这能回答你的问题吗？ How to pass a php variable to Vue component instance in Laravel blade?

它可能，道具可以工作，我希望有更好的方法，直接来自复选框字段。甚至可能使用 :checked

【参考方案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>

【参考方案2】：

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

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