0

I use VueJS2 and this plugin https://github.com/cristijora/vue-tabs for tabs in my application.

I want to change the title of tabs, my problem is the tabs need to be rendered.

Here is my code :

    <vue-tabs v-on:tab-change="handleTabChange">
        <v-tab v-for="(tab, index) in tabs" :title="tab.title">
            <div slot="title">
                <a v-if="! tab.change">{{tab.title}}</a>
                <div class="ui mini input" v-if="tab.change">
                    <input type="text" v-model="tab.title" />
                </div>

                <a @click.stop="updateTitle(index, true)" class="tab-icon"><i class="blue edit icon"></i></a>
                <a @click.stop="removeTab(index)" class="tab-icon"><i class="red remove circle icon"></i></a>
                <a @click.stop="updateTitle(index, false)" class="tab-icon" v-show="tab.change"><i class="green check circle icon"></i></a>
            </div>
            <dashboard-panel></dashboard-panel>
        </v-tab>
        <v-tab title="+">

        </v-tab>
    </vue-tabs>

When I click updateTitle(), I need to render tabs.

I saw renderTabTitle() in the code (https://rawgit.com/cristijora/vue-tabs/master/dist/vue-tabs.js). How can I access this method to render my tabs ?

Vincent Decaux
  • 9,857
  • 6
  • 56
  • 84
  • Yes I saw this, but I saw about `ref` too (https://vuejs.org/v2/guide/components.html#Child-Component-Refs). I want to try this way. – Vincent Decaux Oct 02 '17 at 18:55
  • As the answer to the linked question states, you should use a `ref`. Put a `ref` attribute on the `v-tab` component tag. Then you can access the component via `this.$refs` in your `updateTitle` method to call the component's `renderTabTitle` method. – thanksd Oct 02 '17 at 18:57
  • Yes true, sorry I didn't read all answers, since this one is not in first position, my bad sorry. I will check. – Vincent Decaux Oct 02 '17 at 18:58

0 Answers0