Vue Шаблон - преобразование любых URL-адресов, найденных в возвращаемой текстовой строке, в ссылку

Question

Я работаю над проектом, который основан на Vue модуле (используется код: https://github.com/mishushakov/dialogflow-web-v2/blob/bc3ce7d7cf8e09a34b5fda431590bd48cc31f66b/src/App.vue)

Ссылка на файл, который, по моему мнению, необходимо внести в, пытались, но я вообще не знаю Vue, и мне не повезло.

Возвращенное сообщение представляет собой простой текст, например: это тестовое сообщение, посетите https://wwww.google.com

То, что я пытаюсь сделать, взято из этой текстовой строки, если найденный URL-адрес должен создать ссылку из этого найденного URL-адреса

<RichComponent><RichBubble v-if="message.queryResult.fulfillmentText" :text="message.queryResult.fulfillmentText" /></RichComponent>

Это текущий код возвращает данные.

Есть лучший способ добиться этого? Может быть, есть основная функция?

Я пробовал npm install linkify, но не могу заставить ее работать, так что, может быть, прямой подход будет лучше?

Answer 1

Вы можете использовать linkifyjs для преобразования ссылок в строке в теги привязки. Файл linkifyjs/lib/linkify-string.js дополняет прототип String с помощью linkify() метода .

<template>
  <p v-html="msg.linkify()"></p>
</template>

<script>
import 'linkifyjs/lib/linkify-string' // side effect: creates String.prototype.linkify

export default {
  props: ['msg'],
}
</script>

Он также экспортирует этот метод , если вы предпочитаете явный вызов :

<template>
  <p v-html="linkify(msg)"></p>
</template>

<script>
import linkify from 'linkifyjs/lib/linkify-string'

export default {
  props: ['msg'],
  methods: {
    linkify,
  }
}
</script>