我可以使用vuejs循环中的插槽吗
Can I use slot in a vuejs loop?
我有一个使用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>
在VueJs 2.1.3版本中,您可以使用以下内容:
父级:
<div v-for="row in rows">
<slot name="buttons" :row="row"></slot>
</div>
子级:
<template slot="buttons" scope="props">
<a href="props.row.href">go there</a>
</template>
这种结构不会产生任何警告,因此我认为它是有效的。
https://v2.vuejs.org/v2/guide/components.html#Scoped-插槽
在VueJS 1.0.16中,您可以在模板中执行此操作:
<div v-for="item in tiems">
<slot :name="item.id"></slot>
</div>
然而,从1.0.17开始,VueJS会抛出以下错误:<slot :name="item.id">: slot names cannot be dynamic.
这可能值得与Evan(VueJS创建者)讨论,但我不认为slot
的name
属性是被动的。我相信它只被视为一个文字,并在编译模板之前进行评估。
相关文章:
- jQuery:循环一个具有不同超时值的循环
- 在循环中分配json值时,值被覆盖
- 如何在下面的ES6循环中获得前面的文本
- 为什么“;未定义的“;在JavaScript中结束循环
- 如何创建带有插槽的vue js组件预加载程序
- 如何访问<插槽>内部v-for(vue.js)
- Flexbox导致adsense错误:;adsbygoogle.push()错误:没有可用宽度为0的插槽大小;
- 如何调用日期函数并在接下来的 6 天插槽中显示
- 插槽:访问作用域变量
- CSS 切片/插槽过渡效果,用于/与 DIV 一起使用
- FullCalendar,可以设置可选的false,但允许选择插槽
- 我可以使用vuejs循环中的插槽吗
- 带有道具的内联模板中的Vuejs组件插槽
- CCID插槽状态字节
- 改变时间滑块到30分钟插槽而不是1小时
- 当点击插槽时,剑道UI调度程序在IE中自动滚动
- 循环内部Jquery代码中的变量插值
- 如何检查特定插槽是否已加载或未使用Google Doubleclick API
- 烧瓶插槽io 400(坏请求)
- Fullcalendar.js插槽突出显示