通过道具 Vue3Js 初始化选中状态复选框答案

【问题标题】：Initialise checked state checkboxes via props Vue3Js通过道具 Vue3Js 初始化选中状态复选框
【发布时间】：2022-08-22 22:47:12
【问题描述】：

我尝试创建一个包含多个任务的待办事项列表，我想初始化来自父组件道具的数据：taskList。 taskList 数据如下所示：

0: {id: 31, title: \'test\', finish: false, position: 0, createdAt: \'2022-06-21T14:32:34.102Z\', …}
1: {id: 43, title: \'hello\', finish: false, position: 3, createdAt: \'2022-08-22T05:47:36.214Z\', …}

我想用 :checked=\"element.finish\" 的复选框映射 finish 状态数据，但它不起作用。

<template >
    <div 
        :class=\"[ showTaskList === true ? \'\' : \'hidden\' ] + \' mt-4 task-list list weekList flex flex-col p-6 max-w-sm mx-auto bg-gray rounded-xl shadow-lg\'\"
    >
        <div class=\"flex flex-row gap-4\">
            Liste des taches ({{listId}}) <button @click=\"displayForm(listId)\" href=\"#\" class=\"px-2 rounded bg-blue text-white text-sm uppercase right\">+</button>
            <hr class=\"text-gray1 mb-4\">
        </div>
        <draggable 
            v-model=\"tasksList\" 
            tag=\"div\" 
            item-key=\"id\"
            :move=\"checkMove\"
            ghost-class=\"ghost\"
            chosen-class=\"chosen\"
        >
        <template #item=\"{element, index}\">
            <div class=\"container flex flex-row\">
                <div class=\"\">
                    <div class=\"title font-bold\">{{ element.title }}</div>
                    <div class=\"date text-sm text text-left text-gray1\">Terminé
                        <input
                            @change=\"updateTasksList(element, $event)\"
                            type=\"checkbox\"
                            :checked=\"element.finish\"
                            v-model=\"finishedTask\" 
                            :value=\"element.id\"
                            >
                    </div>{{element.id}} - {{element.finish}} - {{finishedTask}}
                </div>
                <div class=\"ml-auto font-bold text-right\">
                    <button 
                        v-if=\"element.id\" 
                        @click=\"this.$store.dispatch(\'removeTask\', element.id)\"
                    >
                    Supprimer
                    </button>
                </div>
            </div>
        </template>
        </draggable>
    </div>
</template>

<script>
import Draggable from \'vuedraggable\';
import axios from \'axios\';
axios.defaults.baseURL = \'http://localhost:3000\';

export default {
    name: \'taskList\',
    props: [\'tasksList\',\'listId\', \'showTaskList\'],
    components: {
        Draggable,
    },
    data() {
        return {
            drag: false,
            finishedTask: [],
        }
    },
    methods: {
        displayForm(event) {
            this.$emit(\'displayForm\', this.listId);
        },
        checkMove(e) {
            console.log(\"checkMove\");
            console.log(e.draggedContext.element.position);
        },
        async updateTasksList(task, event) {
            const isFinished = this.finishedTask.find( el => el === task.id);

            if (event.target.checked && isFinished) {
                task.finish = true;
                this.updateTask(task);
            }
            else {
                task.finish = false;
                this.updateTask(task);      
            }
        },
        async updateTask(task) {
            try {
                const message = await axios.patch(`/task/${task.id}`,task);

                if (!message) {
                    this.$store.dispatch(\'setError\', \'Impossible de créer la tache\');
                }
                this.message = \'Tache update\';
                // Refresh list
                this.$store.dispatch(\'loadTasks\', this.listId);

            } catch (error) {
                this.$store.dispatch(\'setError\', error);
            }
        }
    },
    computed: {
        error() {
            return this.$store.state.error;
        },
    },
}
</script>

标签： vue.js vuejs3

【解决方案1】：

正如您可以在此处阅读的：https://vuejs.org/guide/essentials/forms.html#checkbox 复选框的选中状态是通过 v-model 而不是 :checked-property 设置的。你试过吗？

【讨论】：