UiTabs: Button in header cannot have click event

[wwoods]

Using pug, I'm trying to set up a template like this:

    ui-tabs(:fullwidth="true")
      ui-tab(:selected="true")
        div(slot="header")
          span Overview
        ul
          li(v-for="item in files" @click="tabs.push(item)") {{item}}
      ui-tab(v-for="tab, idx in tabs")
        div(slot="header")
          span {{tab}}
          ui-icon-button(icon="close" size="small" @click.prevent="tabs.splice(idx, 1)")

The issue is that the @click for the ui-icon-button never gets triggered. I believe this is due to the way the render control is set up to indirectly render the tab header.

[wwoods]

On further investigation, it looks like perhaps rather than the render hack you've implemented, you might consider using dynamic components: https://vuejs.org/v2/guide/components.html#Dynamic-Components

[JosephusPaye]

Hi @wwoods,

The current tab header implementation is not ideal and I've been meaning to rewrite it. I'll look into dynamic components to see if it can help here, thanks for the link 👍.