我有一个使用v-for循环的模板。在模板中,我有一个具有动态分配名称的命名插槽。没有任何内容显示,我做错了什么?
<todo-tabs :list="items">
<div slot="interview">Interview</div>
<div slot="membership">Membership</div>
<div slot="profile">Profile</div>
<div slot="handoff">Handoff</div>
</todo-tabs>
<template id="todo-tabs">
<div class="tab-content ">
<div v-for="item in list" :class="{'active': item.current}" class="tab-pane" id="@{{ item.id }}">
<div class="skin skin-square">
<form class="form-horizontal" role="form">
<div class="form-body">
<slot name="@{{ item.id }}"></slot>
</div>
<div class="form-actions">
<button type="submit" class="btn red btn-outline">Submit</button>
<button type="button" class="btn default">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
Vue.component('todo-tabs', {
template: '#todo-tabs',
props: ['list']
});
var vm = new Vue({
el: "#todo",
data: {
items : [
{id: 'interview', name: 'interview', complete: true, body: 'something1', step_content: 'SOME' },
{id: 'membership', name: 'membership', complete: false, body: 'something2', step_content: 'SOME' },
{id: 'profile', name: 'profile', complete: false, body: 'something3', step_content: 'SOME', current: true },
{id: 'handoff', name: 'handoff', complete: false, body: 'something4', step_content: 'SOME'}
]
}
});
</script>