Vue.js動態組件和列表

Question

我有一個基本的任務列表組件和一個任務項目組件。

<template> 
     <task v-for="(task, index) in tasks" :is="task" >{{ task.name }}</task> 
</template> 

我有一個像這樣的任務編輯按鈕：

<template> 
    <slot></slot> 
    <button v-on:click="$emit('edit')">Edit</button>  
</template> 

是否有一個簡單的方法來具體任務成分的改變任務編輯單擊編輯時？

這個頁面的HTML就是：

<task-list></task-list> 

更新：Here is my fiddle。

Answer 1

添加一個模式，表示您要使用的組件並設置:is="task.mode"。

<div id="app"> 
    <list></list> 
</div> 

<template id="list-template"> 
    <div> 
    <component v-for='task in tasks' 
       :is='task.mode' 
       :task='task' 
       @edit="edit" 
       @save="save"> 
    </component> 
    </div> 
</template> 

<template id="task-template"> 
    <div> 
    <h1>{{task.text}}</h1> 
    <button @click="$emit('edit', task)">Edit</button> 
    </div> 
</template> 

<template id="task-edit-template"> 
    <div> 
    <input type="text" :value="task.text"> 
    <button @click="$emit('save', task)">Save</button> 
    </div> 
</template> 

代碼

Vue.component("list",{ 
    template:"#list-template", 
    data(){ 
    return { 
     tasks:[{text: "task1", mode:"task"}, {text: "task1", mode:"task"}] 
    } 
    }, 
    methods:{ 
    edit(task){ 
     task.mode = "task-edit" 
    }, 
    save(task){ 
     task.mode = "task" 
    } 
    } 
}) 

Vue.component("task", { 
    props:["task"], 
    template:"#task-template", 
}) 

Vue.component("task-edit",{ 
    props:["task"], 
    template:"#task-edit-template" 
}) 

new Vue({ 
    el:"#app" 
}) 

Working example。注意：不實際保存編輯。