Vuejs 嵌套组件、模板和使用 Modals答案

【问题标题】：Vuejs nested components, templates, and using ModalsVuejs 嵌套组件、模板和使用 Modals
【发布时间】：2015-11-17 19:41:14
【问题描述】：

我正在构建一个任务应用程序，其中包含用于不同任务类型的几个不同模板。任务按用户定义的类别分组。

我只是用一个

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>

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

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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

【讨论】：