Как использовать v-img vuetify внутри v-html

Question

Я хотел бы использовать <v-img> из vuetify внутри v-html, чтобы заменить стандарт <img>, т.е.

<div v-html="'<v-img src="some_image_url" />'">

Я понимаю, что v-html предназначен только для стандартного компонента HTML, и я хотел бы знать, есть ли возможность использовать пользовательский компонент (например, <v-img>) внутри v-html.

Answer 1

Мне удалось решить это с помощью v-runtime-template, который можно найти здесь:

https://github.com/alexjoverm/v-runtime-template

Ура!

Answer 2

В приведенном ниже примере используются некоторые дешевые и веселые RegExps для анализа, я ничего не использовал бы в производственном коде.Я сосредоточился на том, как избежать использования v-html вместо поиска надежного способа разбора тегов <img>.

Главное, что я пытаюсь продемонстрировать, - это то, как вы можете разбирать текст на куски.а затем переберите фрагменты в шаблоне для создания v-img компонентов.Я использовал фиктивный компонент для v-img, но принцип был бы точно таким же для реальной вещи.

new Vue({
  el: '#app',
  
  components: {
    vImg: {
      template: '<strong>[<slot/>]</strong>'
    }
  },
  
  data () {
    return {
      text: 'Something something <img src="somepath"> and <img src="otherpath">'
    }
  },
  
  computed: {
    chunks () {
      const re = /(<img\s[^>]*>)/g
      const text = this.text
      const parts = text.split(re).filter(part => part)

      return parts.map(part => {
        if (part.match(re)) {
          const matchSrc = part.match(/\ssrc="([^"]*)"/)
          
          return {
            src: matchSrc && matchSrc[1]
          }
        }
        
        return part
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <template v-for="chunk in chunks">
    <template v-if="typeof chunk === 'string'">{{ chunk }}</template>
    <v-img v-else>{{ chunk.src }}</v-img>
  </template>
</div>