Nimble Picker emojis are not displayed

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

Open RichPC opened 5 years ago

RichPC commented 5 years ago

Hi, I've just started using emoji-mart-vue 2.6.5 and vue 2.5.17 with chromium 70

The picker component with messenger set works, but the nimble picker doesn't show any emoji images, am I doing something wrong?

Nimble Picker
<nimble-picker
  :data="data"
  set="messenger"
/>

Picker
<picker
  set="messenger"
/>

` import data from 'emoji-mart-vue/data/messenger.json'
import { Picker, NimblePicker } from 'emoji-mart-vue'

export default {
components: {
Picker,
NimblePicker, }, data() { return { data: data } } } `

images_missing_screenshot

I can't see any sign of errors in the devtools console

bribar commented 5 years ago

@RichPC I get something similar, but mine throws category errors...and nothing appears in picker

screen shot 2019-01-17 at 9 57 03 am

<nimble-picker set="apple" :data="data" @select="addReaction" title="Pick your emoji…" emoji="point_up" color="#26cdf9"/>

import data from 'emoji-mart-vue/data/apple.json' import { NimblePicker } from 'emoji-mart-vue'

data () { return { data: data } }

components: { 'nimble-picker' : NimblePicker }

"emoji-mart-vue": "^2.6.6"

@jm-david anything on a fix for this? Using the normal picker works, but I would like to optimize and only load what I need...

lucascorrea97 commented 5 years ago

Any updates on that? I'm having the same issue

serebrov commented 5 years ago

Looks like this issue is because the uncompress method (https://github.com/jm-david/emoji-mart-vue/blob/master/src/utils/data.js#L79) does not return data back, it just modifies it in place.

return {
      mutableData: this.data.compressed ? uncompress(this.data) : this.data,
      ...
    }

So after this statement, the mutableData property is undefined and the error is raised in the created() method (https://github.com/jm-david/emoji-mart-vue/blob/master/src/components/picker/nimblePicker.vue#L198) when we access the this.mutableData.categories.

Not sure though why it works with Picker component, probably the data is being uncompressed somewhere, but I don't see where exactly.

serebrov commented 5 years ago