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返回到正在更新的任务。

Vuejs嵌套组件，模板和使用模态

1 个答案: