0

Consider a component below, which accepts tag as props.


<template>
    <input v-model="model"/>
</template>
<script>
export default { 
    name: "InputComponent",
    props: {
        tag: {
            type: String,
            required: false,
            default: null,
        }
    }
}
</script>

I want passing the props div as tag value should return dom below.


<div>
   <input v-model="model"/>
</div>

Solution with composition api is advantange.

Bedram Tamang
  • 3,748
  • 31
  • 27

1 Answers1

0
<template>
    <component :is="tag">
        <input v-model="model"/>
    </component>
</template>
<script>
    export default { 
        name: "InputComponent",
        props: {
            tag: {
                type: String,
                required: false,
                default: null,
            }
        }
    }
</script>

should work.

Orbis
  • 358
  • 1
  • 7
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 20 '21 at 13:30
  • what about no tag conditions ? – Bedram Tamang Dec 20 '21 at 23:58
  • You can work with `v-if` and `v-else` or pass a render function as prop (tag), to render the wrapper – Orbis Dec 21 '21 at 11:50