jQuery UI Widgets Forums Vue(New) JqxTabs style goes off

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • JqxTabs style goes off #106795

    Alex Skiba
    Participant

    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>
    
    JqxTabs style goes off #106803

    Martin
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.