Return a component's output as part of a method's HTML response in Vue.js

Question

I'm using Material Design's Vue component icon set. I'd like to process a string to include an icon in the middle.

Input (a string I can't control):

"I want an icon to go there"

Desired output:

"I want an <timer-icon></timer-icon> to go there"

I'm trying to do this using a method that processes the text. But how can I get my icon component in there?

I've tried this:

<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)
      }
   }
}

But it returns [object Object] in place of "icon."

I've also tried referencing the component as 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>')
      }
   }
}

But it comes back empty.

you need to register new component, components: { MenuIcon } and when using it don't use PascalCase use kebab-case like so <timer-icon /> — fila90
– fila90, Commented Sep 27, 2018 at 21:32
You cannot replace a component into a string. A component is an object. Are you trying to render the icon into your template? If so then you can use dynamic components to do that. — CUGreen
– CUGreen, Commented Sep 28, 2018 at 1:55
@fila90 Thanks, I omitted that from the question when I was simplifying my code but it was in the original. I've updated that here. — podcastfan88
– podcastfan88, Commented Sep 28, 2018 at 3:37

podcastfan88 · Accepted Answer · 2018-09-30 18:29:24Z

4

I figured this out based on this tutorial and a suggestion from Justin Kahn. You must create an instance of the component and then you can access the output and other properties.

1) Import Vue and the component into your page:

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

2) Create an instance of your component

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

3) Mount and then output the innerHTML on an instance within the function

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

The $el object includes other properties, but the innerHTML has what I needed.

answered Sep 30, 2018 at 18:29

podcastfan88

1,1003 gold badges15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 02:35:21Z

0

If you know what the component is going to be you could just toggle that component using v-if inside your template

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

If you do not want to couple your template to a specific component, you can pass the component down and use v-bind:is or just :is

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

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

edited Jul 15, 2022 at 2:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 28, 2018 at 2:32

Justin Kahn

1,3492 gold badges12 silver badges16 bronze badges

5 Comments

podcastfan88 Over a year ago

Thanks for your help. I'm basically processing a string I can't control and trying to insert an icon into it. I've edited the question a bit to clarify. I don't think the solution you proposed would work because I need the icon inside the string that's been supplied.

Justin Kahn Over a year ago

Where is the string that is supplied supposed to be rendered?

podcastfan88 Over a year ago

It's a string generated by another plugin (moment.js calendar string). There are other workarounds but I was trying to add the component result in some programmatic way so I didn't have to do trickier string modification. Perhaps that's not possible.

Justin Kahn Over a year ago

I think you could render the TimerIcon using createElement, convert to HTML markup and then replace like you are currently doing. Any interactivity would get lost, but this will work fine for simple display components.

podcastfan88 Over a year ago

Thanks, this turned me onto the right information and I found a way. I'll post and accept the answer, but if you want to update yours to include please do.

Collectives™ on Stack Overflow

Return a component's output as part of a method's HTML response in Vue.js

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related