search

jm-david / emoji-mart-vue

One component to pick them all 👊🏼
https://jm-david.github.io/emoji-mart-vue
BSD 3-Clause "New" or "Revised" License
603 stars 82 forks source link

Element mounting for contentEditable #55

Closed TheHugoBoss closed 5 years ago

TheHugoBoss commented 5 years ago

Since for my use I have to use contendEditable div instead of input, I thought of using method like this, to push emojis into the div:

var ComponentClass = Vue.extend(Emoji)

var instance = new ComponentClass({
propsData: {emoji: 'santa'}
})

instance.$mount()

And after it gets mounted, i just get the $el and append to my div.

However on version 2.6.6 I get error like this:

TypeError: Cannot read property 'data' of undefined
    at Proxy.render (emoji-mart.js:3001)
    at VueComponent.Vue._render (vue.common.dev.js:3516)
    at VueComponent.updateComponent (vue.common.dev.js:4016)
    at Watcher.get (vue.common.dev.js:4414)
    at new Watcher (vue.common.dev.js:4403)
    at mountComponent (vue.common.dev.js:4023)

On version 2.4.4 this method works without any errors.

Is there an better alternative for inserting emoji-mart-vue emojis via methods into divs or fix for my method with version newer than 2.4.4?

TheHugoBoss commented 5 years ago 
var data = Picker.props.data.default()
var ComponentClass = Vue.extend(NimbleEmoji)
var instance = new ComponentClass({
    propsData: { emoji: 'santa', data: data},
})

This seems to be working fine