I'm currently working on creating a component that takes a title text and a tag as properties to display the title in the corresponding h1, h2, etc. tag. This is my first time using the sweet <script setup> method, but I've encountered a problem:
When used in a parent component's template (correctly imported), everything works fine:
<BlockTitle blocktitle="This is a Title" tag="h1"/>
<BlockTitle blocktitle="This is a Subtitle" tag="h2"/>
Here is the BlockTitle component:
<template>
<div ref="container" class="container">
<component is="tag" ref="title">{{ blocktitle }}</component>
</div>
</template>
<script setup>
import { ref } from 'vue'
const container = ref()
const title = ref()
defineProps({
blocktitle: String,
tag: String
})
</script>
The title displays correctly when I use the tag name directly like is="h2", but when I try to use the prop like is="tag", it doesn't work. The Vue Dev Tools show that the property has the correct value, e.g. (h2), but it is not being applied in the component. What am I missing?