How to handle refs efficiently in Vue 3 composition API

[Ryan Sereno]

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>

[LeoLavanya Dhanaraj]

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

[Alp Altunel]

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]);

[LeoLavanya Dhanaraj]

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.