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>


3 Replies

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


AA Alp Altunel February 26, 2025 12:20 PM UTC

Hello, 

I am using typescript and at this point I receive an error 

Vue: Object is possibly null



const grid = ref(null);

const rowDrop = function (args: any) {

  // console.log('rowdrop ....', args);

  args.cancel = true;

  let moveposition = { oldIndex: args.fromIndex, data: args.data, newIndex: args.dropIndex };

  console.log('moveposition', moveposition);


  if (grid.value!.ej2Instances!.value) {

    grid.value.ej2Instances.value.ej2Instances.reorderRows(moveposition);

  }

  // let gridObj = grid.value.ej2Instances;

not 

  // gridObj.refresh();

};

provide('grid', [ForeignKey, Page, Edit, Toolbar, Search, CommandColumn, Filter, Sort, RowDD]);



LD LeoLavanya Dhanaraj Syncfusion Team February 27, 2025 01:04 PM UTC

Hi Alp,


The reported issue occurs due to the TypeScript type assertion error related to accessing a possibly null value. To resolve this issue, you should ensure proper null-checking before using grid.value.ej2Instances.


For more details on fixing this general TypeScript error, refer to: How to Fix "Object is Possibly Null" in TypeScript.


Sample : https://stackblitz.com/edit/vite-4jypgghn?file=src%2FApp.vue,src%2Fcomponents%2FGrid.vue,tsconfig.json,vite.config.ts


const grid = ref(null);

const rowDrop = function (args) {

  // console.log('rowdrop ....', args);

  args.cancel = true;

  let moveposition = { oldIndex: args.fromIndex, data: args.data, newIndex: args.dropIndex };

  console.log('moveposition', moveposition);

  if (grid.value && grid.value.ej2Instances) { // by enuring object is nullable and then assign value as per typescript standard type error handling way to resolve issue.

    grid.value.ej2Instances.reorderRows(args.fromIndex, args.dropIndex);

  }

  // let gridObj = grid.value.ej2Instances;

  // gridObj.refresh();

};


Please refer this shared details and get back to us if you need any further assistance.


Loader.
Up arrow icon