Dynamic v-slot names

Question

I'd like to replace this kind of code:

    template(v-slot:item-title.1)
      .tab
        ThemeIcon(themeId="welcome")
        div Welcome
    template(v-slot:item-title.2)
      .tab
        ThemeIcon(themeId="themes")
        div Themes
    template(v-slot:item-title.3)
      .tab
        ThemeIcon(themeId="timeline")
        div Timeline

with a loop that runs off a data object:

   template(v-for="(tab, index) of tabs" v-slot:item-title.index)
     .tab
       ThemeIcon(:themeId=tab.themeId)
       div tab.content

But I don't know how to express the dynamic v-slot attribute ("v-slot:item-title.index"). Can this be done?

(The syntax here is Pug, in case it's confusing).

Answer 1

This should work:

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