How To Show A Different Html Element/tag Based On Supplied Prop In VueJs
In Vuejs a can only contain one root element, but what to do if you want to render different html element based on a prop? For example, I have a c
Solution 1:
The is attribute will allow you to dynamically render whatever html element (or custom component - needs to be imported and registered though) you need. You can use it for example like this:
<template>
<template :is="headingType">
{{ headingContent }}
</template>
</template>
<script>
export default {
props: {
headingType: {
type: String,
default: 'h2' // you can pass anything from 'h1' to 'h6' here
},
headingContent: {
type: String,
required: true
}
}
}
</script>
More Info: https://vuejs.org/v2/api/#is
Post a Comment for "How To Show A Different Html Element/tag Based On Supplied Prop In VueJs"