Question

我正在尝试创建一个显示传递给它的项子集的组件。

到目前为止，我有一个带有命名槽的'子列表'组件，如下所示：

 ...
 data: () => ({
    startItem : 0
 })
 ...
<template>
    <div>
        <slot v-for="ctr in maxItems" :name="'s-' + (ctr + startItem - 1)"></slot>
    </div>
</template>

在父母中我执行以下操作：

<sublist :max-items="5">
   <div v-for="(i,index) in items" :slot="'s-'+index">
      {{index}}
   </div>
</sublist>

加载时，一切都很好：

0 1 2 3 4

但是当我在startItem组件中增加sublist时，输出变为：

5 1 2 3 4

因此它删除了第0个插槽并将插槽5填入其位置。更换插槽或使其“动态”的正确方法是什么？我正在使用VueJS 2.4.2

Answer 1

感谢@SteveHolgado，我找到了答案：必须在父:key中添加v-for属性，并将子{@ 1}}包装在自己的div中：

slot

带v-for循环的VueJS插槽不显示正确的元素

1 个答案: