bigton
@bigton
Web-программист

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

Всем привет!

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

Каждое сообщение уходит в компонент <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>

Спасибо за ответы.
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 3
yarkov
@yarkov Куратор тега Vue.js
Помог ответ? Отметь решением.
Комментировать
Если сообщения, требующие рендеринг компонентов, заранее известны, то можно заготовить под каждый компонент, а данные отправлять не текстом, а JSON'ом опр. структуры. Это, конечно, костыльно, но без дополнительных зависимостей.
Пришёл JSON, и в нём имя компонента и данные для него – показываем компонент. Иначе текст.

Ответ написан
Комментировать
lifestar
@lifestar
Wallet карты, Видео-продакшн
В vue3 это можно делать так:
<template>
    <component :is="html"/>
</template>

<script>
import { defineComponent} from 'vue';
...
this.html = defineComponent({
  template: this.content,
});
</script>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы