Отображение и рендеринг Vue компонентов в v-html

Question

Таким образом, я храню HTML своих сообщений в моей базе данных (в качестве примера содержимого ниже) на своей странице сообщений, где вы можете просмотреть данные, которые у меня есть:

<span v-html="content"></span>

Я хотел спросить, как я могузаставить компоненты Vue работать в HTML при извлечении из БД в качестве примера или в качестве v-html в целом.

И если v-html не является подходом, как я часто читал в разных источниках, что будетлучший вариант использования здесь?

<div v-swiper:mySwiper="">
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-wrapper">
   <div class="swiper-slide"><img src="v8.jpg"></div> 
   <div class="swiper-slide"><img src="v7.jpg"></div>
   <div class="swiper-slide"><img src=v6.jpg"></div>
  </div>
<div class="swiper-pagination"></div> 
</div>

Answer 1

Я бы не бросил полотенце так рано.Взгляните на https://github.com/alexjoverm/v-runtime-template

Это, вероятно, полезно для вашего случая использования со всеми обычными опасениями по поводу безопасности этих подходов от злонамеренных инъекций.

Однако в долгосрочной перспективе ябудет искать другое решение, например, встроить некоторые специальные теги в редактор WYSIWYG и заменить эти теги реальными компонентами при рендеринге контента (возможно, с использованием динамических компонентов https://vuejs.org/v2/guide/components-dynamic-async.html).