Estoy tratando de tomar una función de una matriz de objetos y ejecutarla en un evento @click en un DOM element . La única forma que encontré para hacer esto fue guardando la función como una string dentro del objeto y renderizándola con la new Function :

 const func = 'editor.chain().focus().toggleBold().run()' const renderFunction = new Function('return ' + '(func) => { return func }')() console.log(renderFunction(func))

Producción:

 editor.chain().focus().toggleBold().run()

Esto parece devolver la func correctamente dentro de las etiquetas de script setup , que es la función que quiero ejecutar dentro de la directiva @click pero no parece funcionar dentro de la directiva. Cuando hago clic en este icono:

 <fa class="icon" v-for="(button, key) in tool.buttons" :key="key" type="button" :icon="[ 'fas', button.icon ]" :title="button.text" @click="renderFunction('editor.chain().focus().toggleBold().run()')" ></fa>

No pasa nada y no se muestra ningún error. Esta función debería establecer la fuente dentro del editor de texto enriquecido tiptap en bold . Agregando console.log a renderFunction :

 const renderFunction = new Function('return ' + '(func) => { return console.log(func) }')()

devuelve func como una cadena al hacer clic, por lo que al menos el valor de la cadena parece enviarse a la función correctamente, pero ¿por qué la función no se ejecuta dentro de la directiva?