Vue-chartjs: Chart does not render inside conditional
Expected Behavior
I have two "tabs" on a page controlled by a Vue.js conditional.
Each tab has a separate chart instance with separate data. I was expecting that both charts would render. If both charts are moved outside the conditionals, they work fine.
Actual Behavior
Only the first chart seems to render. Switching to the second tab does not render the second chart - just keeps displaying the first chart.
See reproduction here: http://codepen.io/anon/pen/zwxapE?editors=1010
Environment
- vue.js version: 2.2.6
- vue-chart.js version: 2.6.0
- npm version: n/a
timster
All 5 comments
@timster
Check out my edited codepen
Check out Vue documents on conditional rendering. It's a subtle distinction, but if a div has multiple children like your case did, conditional rendering should be applied to an outer tag to ensure data gets re-rendered.
html
<template v-if="tab == 'one'">
viewing chart one
<line-chart :labels="['one', 'two', 'three']" :data="[1,2,3]"></line-chart>
</template>
<template v-if="tab == 'two'">
viewing chart two
<line-chart :labels="['four', 'five', 'six']" :data="[8,9,10]"></line-chart>
</template>
And when you switch tabs the appropriate graph will render as you'd expect.
Pokom
on 17 Apr 2017
Looks like that works. Thanks for the clarification.
Is something like that worth mentioning in the vue-chartjs docs? For people like me who apparently don't remember that part of the Vue.js docs.
timster
on 18 Apr 2017
As it is not directly related to vue-chartjs I don't see a reason to add it to the docs.
apertureless
on 18 Apr 2017
I would agree with @apertureless on this one. @timster I've been caught up a lot with issues like this in both react and angular world for wrappers, and that is normally the sentiment.
One thing to note is I am actively working on improving the readability of the documentation, so I may tag you in that PR if you wouldn't mind helping out a bit.
Pokom
on 18 Apr 2017
I'd be glad to help if you need.
timster
on 18 Apr 2017
Related issues
sergeynilov
路
3Comments
DavidSotoA
路
3Comments
Tirke
路
4Comments
jcalonso
路
4Comments
sylvaincaillot
路
3Comments
Most helpful comment
@timster
Check out my edited codepen
Check out Vue documents on conditional rendering. It's a subtle distinction, but if a div has multiple children like your case did, conditional rendering should be applied to an outer tag to ensure data gets re-rendered.
html <template v-if="tab == 'one'"> viewing chart one <line-chart :labels="['one', 'two', 'three']" :data="[1,2,3]"></line-chart> </template> <template v-if="tab == 'two'"> viewing chart two <line-chart :labels="['four', 'five', 'six']" :data="[8,9,10]"></line-chart> </template>And when you switch tabs the appropriate graph will render as you'd expect.