Vue замена текста на компонент

Question

Есть строка text : string = 'Завтра в городе #msk будет хорошая похода' Как в vue заменить некоторые слова в компонент?

Сейчас:

<p>{{text}}</p>

<p>Завтра в городе #msk будет хорошая похода</p>

Что должно в итоге получится:

<p>{{text}}</p>

<p>Завтра в городе <tag :tagid='#msk'>#msk</tag> будет хорошая похода</p>

Answer 1

по хорошему вам надо еще помимо текста передавать динамический параметр.

Посему будет так:

<p>{{text}}</p>

<p>Завтра в городе <tag :tagid='msk'>{{msk}}</tag> будет хорошая похода</p>

И vue не будет рендерить такую запись:

<tag tagid='#msk'>#msk</tag>

Он выведет ее как обычний html элемент

UPDATE Вам нужно использовать фильтры

Вот здесь рабочий вариант https://codesandbox.io/s/twilight-water-ogfg3

воздаем фильтр в директиве:

 filters: {
    replaceTags(value, tag, replasor) {
      let re = new RegExp(tag);
      return value.replace(
        re,
        `<tag style="color:red;" tagid='${replasor}'>${replasor}</tag>`
      );
    }
  }

Который принимает 3 параметра, по названию думаю поймёте

БЛОГ НА HUSL

Vue замена текста на компонент

Ответы (1 шт):