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

回答

相關問題