Quiero crear una directiva vue que se pueda agregar a cualquier elemento HTML en el que hacer clic adjuntaría un evento de clic para abrir un componente modal "relacionado".

Mi directiva se ve así,

 import { DirectiveOptions, DirectiveBinding } from 'vue/types/options'; const handleDialogClose = () => { console.log("do close"); }; const dialogShow: DirectiveOptions = { bind(el: HTMLElement, binding: DirectiveBinding, vnode: any) { //add a keycode listerner to close dialog on "escape" document.body.addEventListener('keyup', handleDialogClose); //change the current dialogs data to show:true vnode.context.$refs[binding.value][0].show = true; }, unbind() { document.body.removeEventListener('keyup', handleDialogClose); } }; export default dialogShow;

Agrego mi directiva a vue así,

 import Vue from 'vue'; import dialogShow from '../../../common/directives/src/dialogOpen'; Vue.directive('dialog-show', dialogShow);

y adjunte a un elemento HTML como este <button v-dialog-show="'dialog1'">Show Dialog 1</button>

Esto, a su vez, debería iniciar el componente `, pero recibo el siguiente error:

TypeError: no se puede leer la propiedad '0' de indefinido

al que se le tira,

vnode.context.$refs[binding.value][0].show = true;

No, tengo entendido que si tengo más de una directiva en una página, necesito acceder a la matriz de referencias a través de [0] , ¿no es correcto?

Actualmente estoy construyendo la página así,

 <div class="item" v-for="(item, index) in items" :key="index"> <button v-dialog-show="item.slug" type="button">{{ item.title }}</button> <Dialog :item="item" :ref="item.slug" /> </div>