Change html element type of component

Question

I have the following Vue JS component that is part of my grid system.

<bl-column type="section" classList="col--4-12 col--6-12--m col--1-1--s">
 ...
</bl-column>`

I want to set the type of the element to "" (standard), "" or "" dynamically by, as in the above example, adding a type variable that contains section or article.

This is my Column.Vue file:

<template>
  <{type} :class="classList">
    <slot></slot>
  </{type}>
</template>
<script>
  export default {
    name: "Column",
    props: ['classList', 'type'],
    data() {
      return {
        classList: this.classList || '',
        type: this.type || 'div',
      };
    }
  };
</script>

This obviously doesn't work and throws an error, but you get the idea of setting the element type. Is there a way to perform this without using the render() function?

Answer 1

You have a easier way to render dynamic component. The doc https://vuejs.org/v2/guide/components.html#Dynamic-Components

<template>
  <component :is="type" :class="classList">
    <slot></slot>
  </component>
</template>
<script>
  export default {
    name: "Column",
    props: ['classList', 'type'],
    data() {
      return {
        classList: this.classList || '',
        type: this.type || 'div',
      };
    }
  };
</script>

Online example: https://jsfiddle.net/fotcpyc4/