Estoy tratando de hacer que las URL en un texto se pueda hacer clic con Nuxt/Vue.
El texto de entrada es: Learning Outside the Box - https://learningoutsidethebox.com
Tengo un método que lo convierte en un enlace:
setLinks(text) { var Rexp = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig; return text.replace(Rexp, "<NuxtLink to='$1' target='_blank'>$1</NuxtLink>"); } Después de eso, obtengo un resultado: Learning Outside the Box - <NuxtLink to='https://learningoutsidethebox.com' target='_blank'>https://learningoutsidethebox.com</NuxtLink> . Pero todavía no se puede hacer clic.
Cambiar a <a> no resolvió el problema.
¿Podría aclararme qué debo hacer para que este texto se convierta en un enlace que funcione?
Puedes probar con a etiqueta y v-html :
new Vue({ el: '#demo', data() { return { url: 'Learning Outside the Box - https://learningoutsidethebox.com' } }, computed: { getLink() { return this.setLinks(this.url) } }, methods: { setLinks(text) { const Rexp = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig; return text.replace(Rexp, "<a href='$1' target='_blank'>$1</a>"); } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div v-html="getLink"></div> </div>