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。注：実際には編集内容を保存しません。