Acceder a una referencia dentro de un slot en Vue.js

Para facilitar las operaciones CRUD de elementos en mis aplicaciones, que son de lejos lo más aburrido que hay, me he creado un componente que tiene toda la funcionalidad y que se personaliza en cada caso con algunas variables de estado y dos slots, uno para la tabla de visualización de datos y otro para la ventana de creación / edición.

Al intentar que cuando se abra la ventana de creación / edición el foco se ponga en el campo del nombre me he encontrado un problema: no sabía cómo acceder a una referencia definida fuera de nuestro componente e inyectada como un slot. Para ello, si nuestro slot se llama por ejemplo editDialog y queremos localizar el elemento que tiene como referencia crudFocus deberemos hacerlo así:

this.$scopedSlots.editDialog()[0].context.$refs.crudFocus

One thought on “Acceder a una referencia dentro de un slot en Vue.js”

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.