Use of custom display function with tags
The-BlackWidow opened this issue · comments
Hi,
I'm trying to display my items according to this template :
<span>
<span style="font-size:80%;color:#3298FF;font-weight:bold;"> item.type </span> item.name
</span>In that, I have created a display function:
display: item => {
return createElement('span', {
'class': this.itemClass(item.actif)
},
[
createElement('span', this.itemStyle(item.type), item.type),
item.name,
createElement('i', {
'class':{
state: true,
fa: true,
'fa-exclamation-triangle': item.late,
'fa-power-off': item.actif
}
}),
createElement('i', {
'class':{
state: true,
fa: true,
'fa-pause': item.standby
}
})
]
)
}However, I get the error 'createElement is not defined', how do I implement my own model ?
Hi !
Where does that createElement function comes from ?
Are you trying to use React without JSX ?
Hi @elbywan,
Actually, I'm using Vue 2. (I am really sorry for the lack of further explanation of this post ...)
I am trying to use the render logic I guess, but since I am a beginner in vue, I am really struggling with it. As this syntax gives me compilation error I tried the more developed syntax with createElement()
display: item => <span>item.name</span>(I am really sorry for the lack of further explanation of this post ...)
@The-BlackWidow No probs. 😉
A Vue.js component exposes the createElement function under a variable named $createElement.
So in your case you have to use this.$createElement instead of just createElement (just make sure that this refers to your component).
If you want to use the JSX syntax (which is of course much better) you can have a look at this issue, the babel plugin doc. or the Vue doc. if you'd like to have some info on how to setup !
Hope it helps !
@elbywan works perfect! thank you very much
@The-BlackWidow Glad I could help 👍