I was wondering if there was any way to dynamically set the tags of an html element. E.g.

var element = "ol";

<{element}> some content </{element}>

I was wondering if there was any way to dynamically set the tags of an html element. E.g.

var element = "ol";

<{element}> some content </{element}>

• javascript
• vue.js
• vuejs2

2 Answers 2

Easier method is to just use ponent element, like this:

<ponent :is="elType">...</ponent>

Just set elType in data to whatever type of element you want it to be (ie div, h1 etc)

Demo: https://codesandbox.io/s/strange-kapitsa-zbtok?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

You may want to look into Render Function, jsx is also supported in Vue.js2.
Here's a simple example.

var element = 'ol'

Vue.ponent('custom', {
  render: function (createElement) {
    return createElement(
      element,
      this.$slots.default
    )
  },
})

new Vue({
  el: "#app"
})

<script src="https://unpkg./vue/dist/vue.js"></script>
<div id="app">
  <custom>abc</custom>
</div>