如何在 Storybook (Nuxt3) 中渲染动态槽组件

Question

我有一个动态命名插槽，如下所示。

<div>
  <template #middle>
    <slot :name="`middle-${index}`" />
  </template>
</div>

我想在 Storybook 中渲染它，但不知道如何设置模板并渲染它。下面的代码不起作用。我怎样才能实现这个目标？

template: `
  <StoryComponent v-bind="args">
    <template 
      v-for="(content, index) in args.middle" 
      :key="index" 
      :slot="'middle-' + index" //WANT TO SET THE NAME PROPERLY
    >
      {{content}}
    </template>
  </StoryComponent>
`,

Answer 1

我通过将其更改为下面解决了它。

<template 
      v-for="(content, index) in args.middle" 
      :key="index" 
      #[\`middle-\${index}\`]
    >