Is it possible to insert a class into a component class tag from the HTML file? For instance, if we have a component like the one below and want to replace the icon field with whatever is used in the HTML file.
Sample code from MyButton.vue file:
<template>
<component :is="type" href="href" class="button btn">
<i class="fa fa-lg" :class="[icon]"></i>
</component>
</template>
<script>
export default {
props: {
href: {
type: String,
default: null
},
to: {
type: String,
default: null
},
icon: {
type: String,
default: null
}
},
computed: {
type() {
if (this.href) {
return 'a'
} else {
return 'button'
}
}
}
}
</script>
In our app.js file:
Vue.component('my-button', require('./components/MyButton.vue').default);
In the HTML file:
<my-button class="fa-save"></my-button>
The desired output should be something like:
<a type="button" class='button btn'><i class="fa fa-lg fa-close "></i></a>