-
-
Notifications
You must be signed in to change notification settings - Fork 836
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue reactivity hacky with reactiveData mixin #351
Comments
You should check out the Reactivity & Limitations section in the docs.
|
I've updated the pen to better illustrate the issue. It is within the limitations of when using Vue's set to modify a value via index and still have it react, as I showed in the similarly structured message component in the pen, which does react, while vue-chartjs doesn't. I'm not sure what the fix is. https://codepen.io/fossprime/pen/YLGBNm The main point is, Vue definitely supports changing values deep in an object without trashing the object, what it doesn't like is creating objects/arrays via index, as opposed to using set, which is what point #1 means. The code in the pen changes a value and the other components with the exact same data react. This is further confirmed by the Vue.js inspector allowing you to increment values in chartData, to no effect. Point #3 can be achieved with set, which is not supported, but even replacing the data values array won't update the chart, the entire object must be trashed for it to update. Not sure if Chart.js is built in a way that allows modifying one value without trashing an object... if it doest than adding proper reactivity would just be a developer creature comfort feature rather than a genuinely beneficial feature This is probably an enhancement or bug, not a question, depending on to what extent Vue reactivity is claimed supported. Fun fact, it will make a one time update if you resize the screen. That could lead to some hard to find bugs, it's not deterministic. |
Hey @rayfoss well I guess the "problem" is that in your pen, you are mutating the data. Without changing either the length of the data array nor changing the labels. The whole chart.js reactivity topic is quite hacky. Because chartjs is not reactive per default. You can mutate the data like you want but have to call So in theory something like watch: {
chartData () {
chart.update()
}
} should do the trick. However this is not working in every scenarios. There is also somewhere an old issue that goes deeper into it. As far as I remember Regards to your pen, I guess if you would change labels, too it would work. I will check on the current chart.js updates and see if they maybe fixed the However the question is also, which use case do you have, mutating individual values in the given dataset data. Normally you would add new values to the datasets[0].data array. At least I can't think of a scenario where mutation existing values would be useful. |
"At least I can't think of a scenario where mutation existing values would
be useful."
Say you have a chart with login counts fo the last 6 days graphed, with
the last day being the current one... the current one would need to be
mutated live, and the rest would stay the same.
(My backend is Feathers with Vue+Vuex+Nuxt on top)
|
Ah I see, yeah that might be a use-case if you have realtime data over a websocket. |
Hey ! WorkAround watch : {
deepArr () {
this.render();
} and add method render
|
Correct me if I'm wrong, but it would seem that the way the reactiveData and reactiveProp mixin watch for changes is not a deep watch: https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/index.js#L75 So if anything is changed inside of According to the Vue.js documentation, you can add the So the updated code in
I would make a pull request myself with this change, but I'm not sure what implications it has for people already using this library. @apertureless Any thoughts on this? EDIT: POC To show this working, I published a version of this library with the above changes made to the watch in the mixin. Here is @rayfoss example now working as expected: https://codepen.io/anon/pen/GGBKMg This does however cause the following warning in the console:
Now that the watch is deep, the |
This would need some further testing. |
Well the exact original issue is no longer manifesting with 3.4.2... |
Intuitively My final component is this, it is reactive on nested
|
The first value should update every second. When you hover over the data point, you see the real updated value. But the graph does not update.
https://codepen.io/fossprime/pen/YLGBNm
The easy fix is to copy the data to a new object, which is not computationally ideal. It's also just weird, not how Vue works.
Expected Behavior
Chart updates when the Vue data is changed, as most reactive things in Vue do
Actual Behavior
Chart does not update unless the dataset is replaced
Environment
The text was updated successfully, but these errors were encountered: