Как выделить часть текста?

Question

[Nstk54]

Есть список постов, пользователь может выполнять по ним поиск. Задача - выделить ту часть текста, которую искал пользователь.

При попытке заменить Пример на <span>Пример</span> выдает на странице текст <span>Пример</span> вместо элемента span.

Как заставить vue отрендерить новый тег? Не хочется лезть через this.$el, но пока других вариантов у меня нет.

Comments

[Сергей delphinpro]

Это называется, извините, "ниасилил" документацию https://ru.vuejs.org/v2/guide/syntax.html#Сырой-HTML

[Сергей delphinpro]

Что это?

Answer 1

[0xD34F]

computed: {
  highlightedText() {
    const { text, search } = this;
    return search
      ? text.split(RegExp(`(${search.replace(/[\\^$|.*?+{}()[\]]/g, '\\$&')})`, 'gi'))
      : [ text ];
  },
},

<template v-for="(n, i) in highlightedText">
  <mark v-if="i % 2">{{ n }}</mark>
  <template v-else>{{ n }}</template>
</template>

https://jsfiddle.net/0Lf6a5x9/