Vuejs вложенные компоненты, шаблоны и использование модалов

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 вернуться к задаче, которая обновляется.