vue-histogram-slider icon indicating copy to clipboard operation
vue-histogram-slider copied to clipboard

Histogram Not Updating

Open stevegiorgi opened this issue 3 years ago • 6 comments

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 avatar Mar 02 '21 05:03 stevegiorgi

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 avatar Mar 02 '21 05:03 stevegiorgi

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?

stevegiorgi avatar Mar 02 '21 05:03 stevegiorgi

@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.

hsks avatar Apr 12 '21 16:04 hsks

this has been fixed?

bingzhang avatar Jul 29 '21 14:07 bingzhang

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

eugv86 avatar Oct 15 '21 20:10 eugv86

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

nilay036 avatar Apr 19 '22 16:04 nilay036