Render component passed as props

Question

I am working on a component which renders "buttons" - an icon which trigger some function on click.
I'm passing the data as props, but the icons are actually components since I am using mdue library and I have problem rendering them properly.

My buttons array which I pass as props and icons import:

import {
  FormatBold, FormatItalic,
} from 'mdue';

buttons: [
  { icon: FormatBold, onClick: someFunction() },
  { icon: FormatItalic, onClick: someFunction() },
]

And here's how I am trying to display them in my other component

<div v-for="(button, index) in buttons" :key="index" @click="someFunction">
  {{ button.icon }}
</div>

What is displayed on the screen:
{ "name": "" }
{ "name": "" }

The proper way of using icons from that library:

<template>
  <format-bold></format-bold>
</template>

additionally, onClick: someFunction() and @click="someFunction" is wrong, most likly it should be onClick: someFunction and @click="button.onClick" — Lawrence Cherone

IVO GELOV IVO GELOV · Accepted Answer · 2021-06-24T14:20:37

Since your icons are components rather than just the names of the icons - you should render them using the component tag and not interpolating their contents:

<button v-for="(button, index) in buttons" :key="index" @click="button.onClick">
  <template v-if="button.icon">
    <component :is="button.icon" />
  </template>
</div>

Render component passed as props

1 Answers