We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to handle refs efficiently in Vue 3 composition API

The syncfusion components are heavily reliant on the options api and this.$refs, this.grid, etc.
In the vue composition api, this seems to require quite verbose code and is difficult to implement.
All of the syncfusion documentation focuses exclusively on the options api.

For example, in the Sidebar component, if I want to toggle open/ close, the ref doesn't contain the necessary toggle/hide/show functions, I believe because the ref is declared prior to mounting.
onMount may solve this issue? but creates quite verbose components, especially if multiple DOM references are made to the syncfusion component.

What is the recommended approach to use syncfusion components in the vue 3 composition api?


<script setup>
const sidebar = ref(null)
function toggleSidebar() {
    sidebar.toggle()
}
</script>


1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team March 3, 2023 07:10 AM UTC

Hi Rynan,


Greetings from Syncfusion support.


Based on your request, we have evaluated your reported scenario and would like to convey that you intend to utilize the composition API in your Vue 3 application. We have created a simple Vue 3 Sidebar application and have attached a code sample for using the ref tag in a Vue3 application with the composition API and Vite for your reference. Refer to the code snippet and attached sample for your reference.


[sidebar.vue]

const sidebar = ref(null);

 

const toggleClick = () => {

    sidebar.value.toggle();

};

const closeClick = () => {

    sidebar.value.hide();

};


Please get back to us if you need further assistance.


Regards,

Leo Lavanya Dhanaraj


Attachment: viteprojectref_8de41c01_64f8321f.zip

Loader.
Live Chat Icon For mobile
Up arrow icon