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>

更新：这是我的小提琴。

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"
})

工作示例。注意：实际上并不保存编辑。