2

I want to create a component that takes a titletext an a tag as properties and displays the titletext in the according tag h1, h2, ... and I am using first time the sweet <script setup> way, but I have the following problem:

Usage in a parent components template (correctly imported), this all works:

 <BlockTitle blocktitle="This is a Title" tag="h1"/>
 <BlockTitle blocktitle="This is a Subtitle" tag="h2"/>

And 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 is displayed and when I use the tag name directly like is="h2" it works, but when I try to use the prop like is="tag" it doesn´t. The Vue Dev Tools show that the property has the correct value, e.g. (h2) but it is not used in the component. What am I missing?

1 Answer 1

3

You forgot to v-bind! is currently searching for tag!

<component :is="tag"></component>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.