Dynamic Updating tabs from Object with Input issue

[spooksie]

I'm loving your tabs, work great if statically produced. But I'm trying to add new tabs based on the user input. I've managed to add the data to the object with .push. But it doesn't seem to like to refresh and show the new tab.

Example: Input a new name > New tab is added with the searched phrase

Template:

<ul class="navbar-list d-none d-sm-none d-md-none d-lg-block d-xl-block topsearch">
<input type="search" class="form-control form-control-sm" name="search" placeholder="Search for a Hashtag" autocomplete="off" v-model="hashtag" @keyup.enter="pushFields">
</ul>

<vue-tiny-tabs id="mytabs" :anchor="false" :closable="true" :hideTitle="false" @on-close="onClose" @on-before="onBefore" @on-after="onAfter">
 <span v-for="tab in searchdata" v-bind="searchdata.hashtag">
  <div class="section" :id="tab.hashtag">
    <h3 class="title">#{{ tab.hashtag }}</h3>
    <h3>testtetstte</h3>
  </div>
 </span>
</vue-tiny-tabs>

<!-- Check if its adding ok (Which it is) -->
<ul v-if="searchdata.length">
 <li v-for="tab in searchdata">
  #{{ tab.hashtag }}
 </li>
</ul>

Script:

<script>
    import VueTinyTabs from 'vue-tiny-tabs'

    export default {
        mounted() {

        },
        created() {
            this.searchdata.push({
                hashtag: 'Default'
            });
        },
        components: {
            'vue-tiny-tabs': VueTinyTabs
        },
        data() {
            return {
                searchdata: [],
                hashtag: "",
                getHashtagData: window.hashdata
            }
        },
        methods: {
            pushFields: function()
            {
                var vm = this;
                // tried the Vue.set but doesn't work
                // Vue.set(vm.searchdata, 'hashtag', vm.hashtag)
                
                this.searchdata.push({
                    hashtag: this.hashtag
                });
                this.hashtag = "";
            },
            onClose (id) {
                // console.log('Callback function that gets evaluated while closing the tab', id)
            },
            onBefore (id, tab) {
                // console.log('Callback function that gets evaluated before a tab is activated', id, tab)
            },
            onAfter (id, tab) {
                // console.log('Callback function that gets evaluated after a tab is activated', id, tab)
                // console.log(id)
                
                // remove the close button from the default tab
                if (this.getHashtagData.hashtag == id) {
                    $('[data-id="close-' + id + '"]').hide();
                }
            }
        }
    }

P.S I'm running it in Laravel

[spooksie]

I fixed it by adding a counter everytime I update the object and assign the counter number to the tag.

Example: <vue-tiny-tabs id="mytabs" :anchor="false" :closable="true" :hideTitle="false" @on-close="onClose" @on-before="onBefore" @on-after="onAfter" :key="redrawCounter">

[Archie1978]

Hello, I had a same problem. spooksie I had this code, can you help me ?

`

Music3

Content here

`