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>exportdefault {
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"