vs-tabs + API call

[jsinhSolanki]

I am using vs-tabs component. This works fine if I load static data, but if I load data from API, it gives error in browser console like below.

• Your OS: Ubuntu
• Node.js version: 10.15.3
• Vuesax version: 3.9.0
• Which package manager did you use for the install? : Yarn

[guicolares]

The same!

[phuze]

The <vs-tabs> component doesn't support <vs-tab> components being added/removed as child components dynamically.

The Vuesax team will need to update the component to support this functionality. If I can find some time, I'll look into it and submit a pull request.

In the meaning, here's a hack you can use to get around it:

<div :key="forceRender">
    <vs-tabs>
        <template v-for="(user, index) in myUsers">
            <vs-tab :key="index" :label="user.firstName">
                {{ user.address }}
            </vs-tab>
        </template>
    </vs-tabs>
</div>

<script>
export default {
    watch: {
        myUsers(val) {
            this.forceRender += 1
        }
    },
}
</script>

[Dawith305]

I have a similar issue how do I make the tabs label reactive to localization change as other components. vs-tab doesn't seem to bind the values unless the page is reloaded.

[Jam3si]

Same here. I can not make tabs from API call result. Is there any progress?

[emrullahtastan]

I have a similar issue how do I make the tabs label reactive to localization change as other components. vs-tab doesn't seem to bind the values unless the page is reloaded.

I solved it like this. It might work for you. After page load, I change to localization titles with javascript.

<vx-card>
    <vs-tabs id="ihuTabs" alignment="fixed" :color="tabColor">
      <vs-tab label="Users" @click="tabColor = 'success'" class="pt-10">
        users
      </vs-tab>
      <vs-tab label="UserGroups" @click="tabColor = 'warning'" class="pt-10">
        groups
      </vs-tab>
    </vs-tabs>
  </vx-card>

<script>
import {mapState} from "vuex";
import messages from './messages'
  export default {
     computed: mapState({
      lang(state) {
        return state.lang
      }
    }),
    watch: {
      lang() {
        this.changeLang = true;
        this.getTabTitles();
      }
    },
    i18n: {
      messages: messages
    },
    data() {
      return {
        tabColor: 'success',
        changeLang: false
      }
    },
    methods: {
      getTabTitles() {
        let thisApp = this;
        setTimeout(function () {
          let buttons = document.querySelector('#ihuTabs .ul-tabs').getElementsByClassName("vs-tabs--btn");
          for (let i = 0; i < buttons.length; i++) {
            let span = buttons[i].querySelectorAll('span');
            let text = span[0].innerText;
            if (!thisApp.changeLang) {
              span[0].setAttribute("data-i18n-key", span[0].innerText);
            } else
              text = span[0].getAttribute("data-i18n-key");
            span[0].innerText = thisApp.$i18n.t(text);
          }
        }, 100);
      }
    },
    mounted() {
      this.getTabTitles();
    }
  }
</script>

[morez-s]

This problem appears just because "vs-tabs" loads before the api call finished. To prevent this, add v-if="apiCallData.length" condition for "vs-tabs" so that it be loaded only after the data recieved completely from the server.

<vs-tabs v-if="apiCallData.length">
    <vs-tab :label="record.label" v-for="record in apiCallData">
        {{ record.content }}
    </vs-tab>
</vs-tabs>

[sadicann]

This problem appears just because "vs-tabs" loads before the api call finished. To prevent this, add v-if="apiCallData.length" condition for "vs-tabs" so that it be loaded only after the data recieved completely from the server.

<vs-tabs v-if="apiCallData.length">
    <vs-tab :label="record.label" v-for="record in apiCallData">
        {{ record.content }}
    </vs-tab>
</vs-tabs>

I think this is the most efficient solution, simple. Working, thanks.

[mshoaibdev]

This problem appears just because "vs-tabs" loads before the api call finished. To prevent this, add v-if="apiCallData.length" condition for "vs-tabs" so that it be loaded only after the data recieved completely from the server.

<vs-tabs v-if="apiCallData.length">
    <vs-tab :label="record.label" v-for="record in apiCallData">
        {{ record.content }}
    </vs-tab>
</vs-tabs>

This is the perfect solution, I've spent almost a day figuring out the issue. Thanks.