Dynamic components: Unable to use component v-bind:is=
Codermar opened this issue Ā· comments
Jose G. Alfonso commented
Hi,
I am enjoying using your plugin immensely. Thanks!
However, I have an action bar component where I would like to setup a button with a dynamic icon but the svg does not get rendered.
This is the partial code for my action bar component:
<button v-if="addButton && !addButton.hide" :class="{ reversed: addButton.reversed }" :data-cy="`${dataCy}-add`" @click.prevent.stop="$emit('add')">
<SymbolPlusSquare width="20" height="20" :fill="addButton.fill || 'gray'" />
<span v-if="addButton.label">{{ addButton.label }}</span>
</button>
<button v-if="customButton && !customButton.hide" :class="{ reversed: customButton.reversed }" :data-cy="`${dataCy}-custom`" @click.prevent.stop="$emit('custom')">
<component v-bind:is="customButton.icon" v-if="customButton.icon" width="20" height="20" :fill="customButton.fill || 'gray'"></component>
<span v-if="customButton.label">{{ customButton.label }}</span>
</button>
I am passing props: :customButton="{ label: null, icon: 'SymbolPlusSquare', label: 'My Action' }"
What gets rendered is:
<symbolplussquare data-v-9af60b78="" width="20" height="20" fill="gray"></symbolplussquare>
I am using Vue2/Vite 2.8.6 and
"unplugin-icons": "0.14.1",
"unplugin-vue-components": "0.18.4",
"unplugin-vue2-script-setup": "0.10.0",
"vite": "2.8.6",
"vite-plugin-components": "0.13.3",
Serfend commented
NOT SUPPORT THIS WAY for there is no way to infer a component from a dynamic string