I have the following Vue JS ponent 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?

I have the following Vue JS ponent 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?

• javascript
• vue.js
• vuejs2
• vue-ponent

2 Answers 2

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

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

Online example: https://jsfiddle/fotcpyc4/

<template>
  <ponent :is="type">
    <slot />
  </ponent>
</template>
<script>
export default {
  name: 'Heading',
  props: {
    type: {
      type: String,
      default: () => 'h1',
    },
  },
};
</script>