oguzhaninan / vue-histogram-slider

Range slider with histogram for Vue.js
https://npmjs.com/package/vue-histogram-slider
MIT License
123 stars 49 forks source link

Histogram Not Updating #34

Open stevegiorgi opened 3 years ago

stevegiorgi commented 3 years ago

When passing an array of data to the histogram it doesn't update visually. Inspecting the histogram object does in fact show the data in place.

created() { let locations = this.$store.getters['map/activeLocations'] for (let location in locations) { this.data.push(locations[location].price) }

This pulls my location data and writes it to 'data' which is in a reactive state. Should I be pushing the data into the vue-histogram-slider a different way? I can inspect the histogram object and view the data I just pushed into it, yet the histogram bars do not update.

stevegiorgi commented 3 years ago

Here is a screenshot showing the data in the watcher; it's also in several other areas but the histogram does not update. Can I force it to be redrawn?

image

stevegiorgi commented 3 years ago

If anyone else has faced a similar issue – this was a reactivity issue, but I wasn't sure why or how. I ended up adding a key to the component, and a method to update that key. This method was then placed/fired after the data is pushed into the component.

I may be incorrect, but isn't this a reactivity issue with the component itself?

hsks commented 3 years ago

@stevegiorgi I used the exact same solution of using a key to update histogram when the data is updated. I agree this looks like a reactivity issue and I think making the data array reactive will be more performant than updating the key.

bingzhang commented 3 years ago

this has been fixed?

eugv86 commented 3 years ago

v-if="your computed prop.length > 0" on the component should work as a workaround for now

nilay036 commented 2 years ago

Assign key to the component like <section key:x><hist></hist></section> and keep updating the key whenever the event triggers.