Chart does not render inside conditional

[timster]

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

[Pokom]

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

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

[timster]

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.

[apertureless]

As it is not directly related to vue-chartjs I don't see a reason to add it to the docs.

[Pokom]

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.

[timster]

I'd be glad to help if you need.