Vue 3 support for slots

Vue 3 support for slots

Posted by: Chris.Zias on 11 March 2024, 4:28 am EST

• 

  Chris.Zias

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 March 2024, 4:28 am EST

  I followed the instructions at https://developer.mescius.com/blogs/wijmo-in-vue-3
  
  and was able to mostly get things working. There is an issue that I’m running into though.

  It seems that anywhere that wijmo takes over rendering (using the slot API), the app context is lost.

  <wj-menu :itemsSource="menuList">
  	<wj-item-template v-slot="ctx">
  		<router-link :to="ctx.item.path"> {{ctx.item.header}} </router-link>
  	</wj-item-template>
  </wj-menu>
  

  In Vue3, this code breaks because the router-link has no access to the router context that is set up with the app.

  I’m encountering the same issue with the flex grid detail.

  Is there a known workaround?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 12 March 2024, 9:04 pm EST

  Hi Chris,

  Directly inserting a router-link in the menu template wouldn’t work as expected, as the item will be rendered as a default menu item not as a link, so the best approach to get the desired results will be by setting the link text using the template and then handle the ‘itemClicked’ event of the wj-menu to navigate to the required page. Please refer to the below sample demonstrating the same.

  Regarding the context loss issue in FlexGridDetail, please refer to the below sample, which shows how you can use a custom component in grid detail and pass data to the detail component if required.

  Sample link - https://stackblitz.com/edit/vitejs-vite-utejfi?file=src%2Fcomponents%2FWijmo1.vue

  In case, if you still face this issue, please let us know.

  Regards

• 

  Chris.Zias

  • Post Options:
  • Link
    Copy

  Posted 13 March 2024, 1:31 am EST

  This stackblitz is a simple recreation of what I need to do - https://stackblitz.com/edit/vitejs-vite-2c4s4j?file=src%2Fcomponents%2FdetailComp.vue

  In this example, clicking the button outside of the grid, a test string is logged. But opening the flex detail and clicking that button throws an error because it’s unable to access the global variable.

  I am able to access the flex grid context fine, but anything specific to the app (in this case, an instantiated class) is inaccessible.

  Also, it’s worth mentioning that the router context is also inaccessible. I added a test function for routing to a different page and get a similar error when calling it.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 14 March 2024, 12:15 am EST

  Hi Chris,

  The global context is not retained in the custom component used inside the FlexGrid detail row, as you mentioned. We have forwarded this issue to the dev team to confirm if this behavior is by design or not, with internal tracking ID - WJM-33556. We will update you as soon as we have an update from the dev team.

  For now, you can pass the global context to the child component to access the global functions and use the router reference of the parent object to navigate to other pages. Please refer to the following updated sample for the same - https://stackblitz.com/edit/vitejs-vite-jwspes?file=package.json

  Regards