Возврат вывода компонента как части HTML-ответа метода в Vue.js

Question

Я использую Набор значков компонента Vue Material Design .Я хотел бы обработать строку, чтобы включить значок в середине.

Ввод (строка, которой я не могу управлять):

«Я хочу, чтобы значок был там»

Желаемый вывод :

«Я хочу, чтобы <timer-icon></timer-icon> пошел туда»

Я пытаюсь сделать это, используя methodкоторый обрабатывает текст.Но как я могу получить свой компонент значка там?

Я пробовал это:

<template>
    <span>{{ insertIcon(myString) }}</span>
</template>

import TimerIcon from 'vue-material-design-icons/Timer.vue'

export default {
   data () {
      return {
        myString: fromAnotherPlugin // "I want an icon to go there"
      }
   },
   components: {
      TimerIcon
   },
   methods: {
      insertIcon: function (string) {
         return string.replace('icon', TimerIcon)
      }
   }
}

Но вместо "icon" возвращается [object Object].

Я также пытался ссылаться на компонент как HTML.

<template>
    <span>{{ insertIcon(myString) }}</span>
</template>

import TimerIcon from 'vue-material-design-icons/Timer.vue'

export default {
   data () {
      return {
          myString: fromAnotherPlugin // "I want an icon to go there"
      }
   },
   components: {
      TimerIcon
   },
   methods: {
      insertIcon: function (string) {
         return string.replace('icon', '<TimerIcon></TimerIcon>')
      }
   }
}

Но он возвращается пустым.

Answer 1

Я понял это, основываясь на этом уроке и предложении Джастина Кана.Вы должны создать экземпляр компонента, а затем получить доступ к выходным данным и другим свойствам.

1) Импортировать Vue и компонент на свою страницу:

import Vue from 'vue'
import TimerIcon from 'vue-material-design-icons/Timer.vue'

2) Создать экземплярвашего компонента

const ComponentClass = Vue.extend(TimerIcon)
const instance = new ComponentClass()

3) Смонтируйте и затем выведите innerHTML для экземпляра внутри функции

  insertIcon: function (string) {
      const myicon = instance.$mount()
      const myiconhtml = myicon.$el.innerHTML
      return string.replace('icon', myiconhtml)
  }

Объект $ el включает в себя другие свойства, но у innerHTML есть то, что мне нужно.

Answer 2

Если вы знаете, что это за компонент, вы можете просто переключить этот компонент, используя v-if внутри вашего шаблона

<template>
  ... other stuff
  <TimerIcon v-if="showTimer" />
</template>

Если вы не хотите связывать свой шаблон с конкретным компонентом, выможет пропустить компонент и использовать v-bind:is или просто :is

<component :is="TimerIcon"> </component>

source: https://vuejs.org/v2/api/#component