我有一个基本的任务列表组件和一个任务项组件。
<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>
答案 0 :(得分:4)
添加表示您要使用的组件的模式,并设置: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。注意:实际上并不保存编辑。