[Question]: How to access width?

[Kaschi14]

Question description

I want to rerender some stuff in my application based on the new width of the resizable resized v-resize-drawer. But I can't seem to manage.

Steps to reproduce

I tried with adding a ref to v-resize-drawer:
<v-resize-drawer
ref="drawer"
:width="drawerWidth"
@handle:drag="handleDrag"
...

and added drawerWidth as a local prop

and then accessing it in a method:
handleDrag() {
const drawerElement = this.$refs.drawer.$el;
const newWidth = drawerElement.offsetWidth;
console.log('Drawer width:', newWidth);
// do something with the updated width
},

Relevant log output

No response

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[webdevnerdstuff]

What you are looking for is probably using @handle:mouseup and from the event it returns you can get the evt.offsetWidth. You can see an example of it being used in my App.vue file as I have to use it to deal with a Vuetify bug that hasn't been resolved yet.

https://github.com/webdevnerdstuff/vuetify3-resize-drawer/blob/main/src/App.vue#L236