Как строку с бека превратить в компонент?

Question

[Anton B]

Всем привет!

Есть чат, сообщения приходят с сервера.

Каждое сообщение уходит в компонент <v-msg :content="message" />

Некоторые сообщения приходят с bb-тегами, которые должны быть обработаны.

Например, "Вы получили 10 [ico=1]", преобразуем простой заменой в

Вы получили 10 <img src="..." v-tooltip="'золото'">

В итоге пользователь видит сообщение в котором есть иконка золота, но при наведении не работает тултип, потому что не была обработана директива v-tooltip.

Вопрос: как дешево (с точки зрения производительности и кода) заставить вуе обработать директиву?

Код компонента сообщения

<template> 
  <div
    class="v-msg"
    v-html="html"
  />
</template>

<script lang="ts">

import Vue from 'vue'
import BB from '@/services/bb'

export default Vue.extend({
  name: 'VMsg',

  props: {
    content: {
      type: String,
      required: true,
    },
  },

  computed: {
    html() {          
      return BB.parse(this.content)
    },
  },
})
</script>

Спасибо за ответы.

Comments

[Сергей Соколов]

может, ограниченное число «служебных» сообщений заготовить на фронте в виде компонентов, и динамически использовать какой-то из них в v-msg?

Типа, если пришли данные, которые можно разобрать как JSON, и там есть поле "имя_копонента" с одним из списка, то вставить компонент с данными из JSON. В примере придёт

{
  component: "coins", amount: 10, icon: "gold"
}

[Сергей Соколов]

v-html не может содержать в себе Vue компонентов:

spoiler

Answer 1

[Алексей Ярков]

https://www.npmjs.com/package/vue-runtime-template...

Answer 2

[Сергей Соколов]

Если сообщения, требующие рендеринг компонентов, заранее известны, то можно заготовить под каждый компонент, а данные отправлять не текстом, а JSON'ом опр. структуры. Это, конечно, костыльно, но без дополнительных зависимостей.
Пришёл JSON, и в нём имя компонента и данные для него – показываем компонент. Иначе текст.

Answer 3

[Александр Ме]

В vue3 это можно делать так:

<template>
    <component :is="html"/>
</template>

<script>
import { defineComponent} from 'vue';
...
this.html = defineComponent({
  template: this.content,
});
</script>