victorgarciaesgi / vue-chart-3

📊 A simple wrapper around Chart.js 3 for Vue 2 & 3

Home Page:https://vue-chart-3.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

v-bind not working well in v-for loop

mbokil opened this issue · comments

I ran into this problem with v-bind. I have line charts in a loop using the composition API but the charts kept disappearing when the data changes. I ended up having to force the line charts remount using a v-if hack. After the component is mounted I set the v-if to true to force the component to remount. Anyone seen this issue?
<LineChart v-if="row.isVisible" v-bind="row.bpTrendProps" class="tilesLineChart" :options="row.bpChartOptions" />

Hi @mbokil , can you make a quick reproduction on codesandbox or something so I can investigate? :)
Maybe is because of the v-for key attribute, but I think you tried it already

Yeah I have a unique key for each element. I tried some other suggestions like adding another binding like :updateCount="count" to the chart and then incremented count after updating the data but the reactivity doesn't pickup the change. Let me see if I can isolate the component and post it with some mock data on codesandbox.