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

我正在构建一个任务应用程序，它具有用于不同任务类型的几个不同模板。任务按用户定义的类别分组。Vuejs嵌套组件，模板和使用Modal

我简单地用一个

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

来源

2015-11-17 Joshua

我有时处理这种情况的方式是让那里只有一个模式组件，您可以将任务数据传递到单击任务时。然后模态组件打开，并在一个地方拥有所有的编辑/删除功能，以处理传递给它的任何任务。

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

来源

2015-11-20 21:15:04

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

回答

相关问题