0
119
VistasVue.js vincula el evento de clic para anclar el elemento dentro de v-html después de que el componente se represente
Tengo un texto que tiene enlaces dentro. Pero agrego estos enlaces (elementos de anclaje) después de que se representa la vista (obtengo la información del enlace del servidor e inserto el elemento de anclaje para cada palabra). Cada enlace tiene una llamada a una función dentro de mi contenedor, pero supongo que debido a que los enlaces se insertan en la página después del renderizado, no se vinculan a los métodos del modelo. ¿Cómo puedo hacer que estos enlaces hagan clic en eventos vinculados al método después de renderizar?
Aquí está mi componente:
<div class="info-text" v-html="descriptionShown"></div> 
1 Respuestas
Responde la pregunta0
Desafortunadamente no puedes hacer esto. La directiva v-html de Vue vincula el contenido como HTML sin procesar, en lugar de la sintaxis de plantilla de vue como la que usaría normalmente, lo que significa que vue no interpreta ningún enlace de datos, como eventos. De la guía vue:
El contenido del intervalo se reemplazará con el valor de la propiedad rawHtml, interpretado como HTML sin formato: los enlaces de datos se ignoran. Tenga en cuenta que no puede usar v-html para componer plantillas parciales, porque Vue no es un motor de plantillas basado en cadenas.
Además, generalmente se considera algo que se debe evitar, ya que esto dejaría su sitio web abierto a la inyección de XSS, a menos que tenga mucho cuidado con la forma en que usa la propiedad v-html y se asegure de que nunca toque el contenido ingresado por el usuario.
Su mejor apuesta sería analizar los datos en un objeto o matriz según sea necesario y hacer que sea manejado por un componente con un bucle v-for o similar, los datos se pasan como un apoyo. Por ejemplo, podrías tener algo como esto:
[{text: "Some text content", link: ''},{text: "Followed by a link.", link: "example.com"}]Y haga que el componente opere sobre eso con un v-for y luego genere texto sin formato o una etiqueta de anclaje según el contenido del enlace, o cualquier otra propiedad que desee definir, como emitir un evento específico con $emit('eventName ') que puede capturar donde se llama al componente.