JqxTabs style goes off

[Alex SkibaParticipant]

Hi! Please take a look at a modified App.vue file from this tutorial.
If you run it, you can see that after visibility of the Tab 2 changes styles of this tab go off, and it becomes unusable. Please advise how can I make it working again. Thank you!

<template>
  <div>
    Tab 2 should be {{visible ? 'visible' : 'hidden'}}
    <br />
    <button @click="doThings">Boom</button>
    <br/>

    <jqxTabs>
        <ul>
            <li>Tab 1</li>
            <li v-if="visible">Tab 2</li>
        </ul>
        <div>
            Content of the tab 1
        </div>
        <div>
            Content of the tab 2
        </div>
    </jqxTabs>
  </div>
</template>

<script>
import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';

export default {
  components: {
    JqxTabs
  },
  data: function() {
    return {
      visible: true
    };
  },
  methods: {
    doThings: function() {
      this.visible = !this.visible;
    }
  }
};
</script>

<style src='./assets/styles/jqwidgets/jqx.base.css'></style>
<style src='./assets/styles/jqwidgets/jqx.material-green.css'></style>

[MartinParticipant]

Hello Alex Skiba,

The reason for this to happen is that once the jqxTabs component is initialized and you are using v-if,
the </li> element is removed and then is added again but without the jqwidgets classes and internal elements.

Instead, you can add and remove a class for hiding and showing the element.
Please, check this solution:

<template>
  <div>
    Tab 2 should be {{visible ? 'visible' : 'hidden'}}
    <br />
    <button @click="doThings">Boom</button>
    <br/>

    <jqxTabs>
        <ul>
            <li>Tab 1</li>
            <li id="tab2">Tab 2</li>
        </ul>
        <div>
            Content of the tab 1
        </div>
        <div>
            Content of the tab 2
        </div>
    </jqxTabs>
  </div>
</template>

<script>
import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';

export default {
  components: {
    JqxTabs
  },
  data: function() {
    return {
      visible: true
    };
  },
  methods: {
    doThings: function() {

        if (this.visible) {
            document.getElementById('tab2').classList.add('hidden');
        } else {
             document.getElementById('tab2').classList.remove('hidden');
        }
        
      this.visible = !this.visible;
    }
  }
};
</script>

<style>
    .hidden {
        visibility: hidden;
    }
</style>
<style src='./assets/styles/jqwidgets/jqx.base.css'></style>
<style src='./assets/styles/jqwidgets/jqx.material-green.css'></style>

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts