[Vuejs]-How to show a different html element/tag based on supplied prop in VueJs

by

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://v2.vuejs.org/v2/api/#is

👤ajobi

Leave a comment