Splitter is not working correctly with vue keep-alive

[Liraz]

Hi,

In my application there are 2 screens: first screen with a list of plans, second screen shows the opened plans data, each in a separeted tab. In the tab itself I am using the Splitter component between two grids. I am using the vue keep-alive on the screens because I want to keep the state on each tab.

When opening a plan for the first time, it is opened in the second screen in a tab and the Splitter is properly showing the grids (screenshot 1). Now I am going back to the first screen, and opening another plan. The second plan is opened in the second screen (which is already rendered due to the keep-alive) in a new tab. Here the Splitter component is not showing the grids properly (screenshot 2).

Screenshot 1:

screenshot 2:

I followed this to define the pane content (using id): pane-content-using-selector

[Buvana Sathasivam]

Hi Liraz, 

Greeting from Syncfusion support. 

We have checked your query. But, we were unable to reproduce your reported problem. We have created a sample based on vue keep-alive and each tab contains a Splitter component that renders pane content using ID. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue3-1863974335 

Could you please share the below information? 

• Are you rendering the Syncfusion Grid component on the second tab with a splitter component?

• Can you please modify the above code to replicate your issue or else share the code snippet to reproduce your issue?

• Share the video with your issue to better understand your requirements.

Regards, 

Buvana S 

[Liraz]

Hi Buvana,

Please see the attached project sample.

I created a small project example which is very similar to what I am trying to do in my project (it involves vue-router and vuex).

You will see that when you click on 'Add Tab' button, you will be routed to another screen (screen1) with the opened tab, and the splitter with the panes content are displayed properly. But when you will go back to screen2 and click again to add another tab, the new added tab contains the spliter but the panes don't show the content.

Please let me know if you need more information.

Thanks,

Attachment: Vue3_splitter_c866900d.zip

[Buvana Sathasivam]

Hi Liraz, 

Currently, we are validating your shared sample. We will update you the further details on or before February 8, 2022. 

Regards, 

Buvana S 

[Buvana Sathasivam]

Hi Liraz, 

Thank you for your patience. 

We have checked your shared sample. This issue happens because the splitter root element is created dynamically at the DOM element. So, each pane's content is not properly updated in the DOM element when adding the new tab. You can resolve the issue by assigning the pane settings content to the mounted Vue lifecycle hooks. Please see the code and sample below. 

HomeComponent.vue 

<ejs-splitter :id='`${tabName}-splitter1`' ref='splitterObj' width='600px' height='200px'> 

        <e-panes> 

            <e-pane min='60px' size ='200px'></e-pane> 

            <e-pane min='60px' size ='200px'></e-pane> 

            <e-pane  min='60px' size ='200px'></e-pane> 

        </e-panes> 

    </ejs-splitter> 

.. 

    <div :id="`${tabName}-left-pane-content1`" style="display: none;"> 

        <div>Left pane<div id='panetext'>Home Pane size: 25%</div> 

            <div id='panetext'>Home Pane min: 60px</div> 

        </div> 

    </div> 

…… 

export default { 

……. 

  props: { 

      tabName: String 

  }, 

  mounted: function() { 

      this.$refs.splitterObj.ej2Instances.paneSettings[0].content = "#" + this.tabName + "-left-pane-content1"; 

      this.$refs.splitterObj.ej2Instances.paneSettings[1].content = "#" + this.tabName + "-middle-pane-content1"; 

      this.$refs.splitterObj.ej2Instances.paneSettings[2].content = "#" + this.tabName + "-last-pane-content1"; 

  } 

}; 

</script> 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Splitter-vue3-155990153  

Regards, 

Buvana S 

[Liraz]

Thank you very much! It works.

[Buvana Sathasivam]

Hi Liraz, 

 

Welcome, 

 

We are glad that your reported issues are resolved. Please get back to us if you need any further assistance. 

Regards, 

Buvana S