javascript - Vuejs 嵌套组件、模板和使用 Modals

Question

我正在构建一个任务应用程序，它具有针对不同任务类型的一些不同模板。任务按用户定义的类别进行分组。

我只是使用

v-for="category in categories"

为了构建我的任务容器，然后在任务容器中，我有一些模板，具体取决于任务类型:

<task v-if="task.type == 0" v-bind:task="task" ></task>
<item v-if="task.type == 1" v-bind:task-"task"></item>

这很好用，任务和项目被定义为组件，并且每个组件都使用任务属性。问题出在我的任务和项目模板上，特别是模式模板的嵌套。

<template id="#task">
    // Checkbox to mark a task as completed
    <input type="checkbox" v-bind.id={{ task.id }} v-on:click="complete" />
    <span v-on:click="displayModal">{{ task.name }}</p>
    // Modal to edit the specific task
    <modal v-bind:task="task"></modal>
</template>

我很难弄清楚模式应该如何与任务组件相关。我目前已将模式设置为任务的一个组件(这让我担心，因为我也需要重复该功能作为项目的一个组件，而且感觉不太干燥。)

下面是我的任务组件 js。当前，当单击任务时，模式会打开，但第一个任务数据会保留。如有任何帮助，我们将不胜感激。

'task': {
        template: "#task",
        props: ['task'],
        data: function(){
            return {
                showModal: '',
            }
        },
        methods: {
            complete: function (){
                this.task.completed = 1;
                this.$http.patch('../tasks/' + this.task.id, {task : this.task}, function (task)
                {
                    // remove the task item
                });
            },
            displayModal: function() {
                this.showModal = $("#myModal").modal({ show: true});
            },
        },
        components: {
            'modal': {
                template: "#modal",
                props: ['task'],
                data: function() {
                    return {
                        task: [],
                    }
                }
            },
        }
    },

Answer 1

我有时处理这个问题的方法是只有一个模态组件，您可以在单击任务时将任务数据传递给该组件。然后，模式组件打开，并将所有编辑/删除功能集中在一处，以处理传递给它的任何任务。

保存后，您可以将结果$dispatch发送到父vue实例，并$broadcast返回到正在更新的任务。