Vue v-for & v-if not rendering canvas
zotosk opened this issue · comments
Using "vue": "^2.6.10", it seems that i cannot render multiple canvas in a v-for in Vue, also seems to be the same problem with v-if.
Tried the vue2-canvas-guage & the vue-canves-guage packages too, but same issue
Is there a workaround ?
Thanks
example:
<el-row :gutter="20" v-for="item in attributes" :key="item.id">
<el-col :span="8" v-if="item.node_attribute_id == 2">
<div class="grid-content">
<div class="attribute-title">Air Temperature</div>
<canvas
data-type="linear-gauge"
data-width="120"
data-height="200"
data-units="°C"
data-min-value="0"
data-max-value="100"
data-major-ticks="0,20,40,60,80,100"
data-minor-ticks="5"
data-stroke-ticks="true"
data-highlights='[ {"from": 38, "to": 100, "color": "rgba(200, 50, 50, .75)"} ]'
data-color-plate="#fff"
data-border-shadow-width="0"
data-borders="false"
data-needle-type="arrow"
data-needle-width="2"
data-animation-duration="1500"
data-animation-rule="linear"
data-tick-side="left"
data-number-side="left"
data-needle-side="left"
data-bar-stroke-width="2"
data-bar-begin-circle="false"
data-value="35"
></canvas>
</div>
</el-col>
<el-row>
Image issue:
3 canvas that are not rendering, are inside the v-for and have v-if | The one rendering, has NO v-for and NO v-if
using watchers and v-show and rendering it inside a foreach, assigning this.attribute.airTemperaute = new LinearGauge fixed the probelm. FOr anyone with the same issue, and using renderTo: document.querySelector('#air-temperature'),