Javascript Vuejs嵌套组件、模板和使用模态

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

我只是简单地使用

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>

---

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

---

保存后，您可以将结果

$dispatch

发送到父vue实例，并

$broadcast

返回到正在更新的任务。

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

保存后，您可以将结果

$dispatch

发送到父vue实例，并

$broadcast

返回到正在更新的任务

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

'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: [],
                    }
                }
            },
        }
    },