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}>
Add a comment
|
2 Answers
Easier method is to just use component element, like this:
<component :is="elType">...</component>
Just set elType in data to whatever type of element you want it to be (ie div, h1 etc)
Comments
You may want to look into Render Function, jsx is also supported in Vue.js2.
Here's a simple example.
var element = 'ol'
Vue.component('custom', {
render: function (createElement) {
return createElement(
element,
this.$slots.default
)
},
})
new Vue({
el: "#app"
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<custom>abc</custom>
</div>
5 Comments
A. L
I don't believe this is scoped is it?
choasia
Sorry but not sure what you need, do scoped slots help? vuejs.org/v2/guide/components.html#Scoped-Slots
A. L
Like, if I were to use
<custom></custom> in a separate file would it still render it as <ol> or as <custom></custom>choasia
Got it. I think it depends on the way you register your component.
Vue.component is used for global registration which means the component registered will be exposed everywhere. However, we are allowed to use local registration to solve this problem. See: vuejs.org/v2/guide/components.html#Local-RegistrationA. L
ah cool, I guess I'll have to think about it more about how to incorporate all of this and make it work and locally scoped lol