如何在Pug中实现动态v-slot名称的循环渲染？

你需要用动态插槽名的语法，在Pug里通过方括号包裹表达式来实现动态的v-slot属性：

template(v-for="(tab, index) of tabs" v-slot:[`item-title.${index + 1}`])
  .tab
    ThemeIcon(:themeId=tab.themeId)
    div {{ tab.content }}

补充说明： #

• 原代码里的插槽序号从1开始，所以循环中要通过index + 1来对应序号
• 你的tabs数据结构需要匹配如下格式：

data() {
  return {
    tabs: [
      { themeId: 'welcome', content: 'Welcome' },
      { themeId: 'themes', content: 'Themes' },
      { themeId: 'timeline', content: 'Timeline' }
    ]
  }
}

• 模板中的文本要使用插值语法{{ tab.content }}，否则会直接渲染成字符串"tab.content"

内容的提问来源于stack exchange，提问作者Steve Bennett