UiTabs: Button in header cannot have click event

[Walt Woods]

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.

[Walt Woods]

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

[Josephus Paye II]

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 👍.