Como sabemos, podemos tener cualquier etiqueta html en vuejs a través v-html , aquí en la función de ciclo de vida mounted() quiero hacer un enlace simple y adjuntarlo a la etiqueta p . por ejemplo:
<template> <p v-html="caption"></p> </template> <script> export default { name: "emulator", props: { caption: { type: String, required: false } }, mounted() { this.$emit('caption', this.$el.innerText.replace( /#([\p{L}\p{N}_-]+)/u, '<a href="https://www.instagram.com/explore/tags/$1" target="_blank">$&</a>' )) } } </script> this.$emit funciona bien, pero no tengo ningún enlace en la etiqueta p cuando trato de escribir, por ejemplo:
hola #vuejs
debería ser: <p><a href="https://www.instagram.com/explore/tags/vuejs" target="_blank">hi #vuejs</a></p>
el método de replace también funciona bien y podemos probarlo desde este enlace
No sé si $emit en este componente es necesario, pero lo siguiente funciona:
<template> <p v-html="link"></p> </template> <script> export default { name: "emulator", props: { caption: { type: String, default: '#john' } }, computed: { link(){ const anchorTag = this.caption.replace( /#([\p{L}\p{N}_-]+)/u, '<a href="https://www.instagram.com/explore/tags/$1" target="_blank">$&</a>' ) this.$emit(anchorTag) // <--- remove this line if you don't need the HTML tag in your parent return anchorTag } } } </script>