VueJs CLI импортирует / компилирует строку html в vue

Question

Я ищу решение для импорта моей html-строки в мой компонент VueJs и для возможности выполнения любого кода VueJs, присутствующего в html-коде.Я использую VueJs (2.5.x) + CLI для запуска приложения vue и через несколько секунд после запуска. Он запрашивает API для получения HTML-кодов.

HTML-код (после импорта ищелкнув по карте, я смогу изменить accessCardId данные):

<div class="md-card md-theme-default" v-on:click="accessCardId = '5bfc54cf553b485038333ee5'">
        <div class="md-card-media">
          <img src="/icons/europa.jpg" alt="People" class="icon">
        </div>
        <div class="md-card-header">
          <div class="md-title">Europa</div>
          <div class="md-subhead">Every where, you can us...</div>
        </div>
      </div>

Скрипт VueJs (в home.vue):

<script>
  export default {
    name: 'Home',
    props: {
      msg: String
    },
    data: () => ({
      listCards: null,
      currentPage: -1,
      accessCardId: null
    }),
    filters: {
      shortDescription: description =>
        `${description.substring(0, 150)}${description.length > 150 ? '...' : ''}`
    },
    methods: {
      async loadPage() {
        await this.$http.get(`${process.env.VUE_APP_SERVER_URL}/icos?token=${process.env.VUE_APP_SERVER_TOKEN}&page=${this.currentPage + 1}`)
          .then(async res => {
            this.currentPage = this.currentPage + 1;
            // res.body === my html code
          });
        }
      }
    }
</script>

Answer 1

Вы можете использовать директиву v-html, которая используется для визуализации статического HTML-контента, который не требует обработки событий или привязки данных, и в соответствии с official doc :

Содержимое span будет заменено значением свойства rawHtml, интерпретируемым как обычный HTML - привязки данных игнорируются.Обратите внимание, что вы не можете использовать v-html для составления частичных шаблонов, потому что Vue не является движком шаблонов на основе строк.Вместо этого компоненты являются предпочтительными в качестве основной единицы для повторного использования и композиции пользовательского интерфейса

. Другое решение заключается в использовании пакета v-runtime-template, найденного в https://github.com/alexjoverm/v-runtime-template

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