通過道具Vue3Js初始化檢查的state復選框

Question

我嘗試創建一個包含多任務的待辦事項列表，我想從父組件道具初始化數據：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', …}

我想 map 用:checked="element.finish"的復選框finish state 數據，但它不起作用。

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

Answer 1

正如您可以在此處閱讀的： https://vuejs.org/guide/essentials/forms.html#checkbox復選框的選中 state 是通過 v-model 而不是：checked-property 設置的。 你試過嗎？

 const App = { data: () => ({ tasks: [{ id: 31, title: 'test', finish: false, position: 0, createdAt: '2022-06-21T14:32:34.102Z', }, { id: 43, title: 'hello', finish: true, position: 3, createdAt: '2022-08-22T05:47:36.214Z', }] }) }; Vue.createApp(App).mount('#app');

 <html> <div id="app"> <div v-for="task of tasks":key="task.id"> <p>{{task.title}}</p> <input type="checkbox":checked="task.finish" v-model="task.finish"> </div> {{tasks}} </div> <script src="https://unpkg.com/vue@3"></script> </html>