I have been experimenting with the example Codepen (https://codepen.io/whoistobias/pen/yLNgjwy) in an attempt to enhance the Vuetify VBtn component and create a reusable Button Icon component.
I am very close to achieving my goal, but as usual, I face difficulties towards the end.
The key code snippet is as follows:
const VBtn = Vue.options.components["VBtn"];
const VIcon = Vue.options.components["VIcon"];
const ButtonIcon = {
name: 'ButtonIcon',
extends: VBtn,
props: {
icon: {
default: true,
type: Boolean
},
iconColor: {
default: 'info',
type: String
},
iconName: {
default: 'help',
type: String
},
outline: {
default: true,
type: Boolean
}
},
methods: {
genContent () {
return this.$createElement('div', {
class: 'v-btn__content'
}, this.$slots.default || [this.$createElement(
VIcon,
{
props: {
color: this.iconColor
}
},
this.iconName
)])
}
}
};
The issue lies in the insertion of this.iconName into VIcon. The result shows "add" instead of just add when the value of the prop iconName is add.
I have tried to understand the information in the Vue documentation regarding the use of createElement - https://v2.vuejs.org/v2/guide/render-function.html?redirect=true#createElement-Arguments
Here is the link to my modified version on Codepen: https://codepen.io/scp-nm/pen/PoQPVEP
Any assistance on this matter would be highly appreciated.