vuejs2 - 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 。注意:实际上并不保存编辑。