there is an SVG diagram in a Vue.js template with nested drawn circles symbolizing doors. When the doors are OPEN the stroke/fill color should be GREEN; & when CLOSED the stroke/fill color should be RED. When my R/T data arrives (i.e. to SignalR client plug-in). I need to set the state & compute the colors, which when doing, but the colors are not getting redrawn. Any suggestions? when using Vue.js 2.9.6.
Thank you
there is tried computed properties as well as watches. The data() fields are updating but the bound colors are not reacting.
In the template
<div class=”VcSchematicAccessControlRedundantImg” >
<svg :width=”widthImg” :height=”heightImg” viewBox=”0 0 1000 1000”
xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" >
<image xlink:href=”static/img/PNID_AccessControl_Redundant.svg” height=”100%” width=”100%” />
<circle cx=”288.0” cy=”504.0” r=”9” stroke-width=”3” :stroke=”r2aColor” :fill=”r2aColor” />
<circle cx=”670.0” cy=”530.0” r=”9” stroke-width=”3” :stroke=”r2bColor” :fill=”r2bColor” />
<circle cx=”352.0” cy=”874.0” r=”9” stroke-width=”3” :stroke=”r3Color” :fill=”r3Color” />
<circle cx=”949.0” cy=”546.0” r=”9” stroke-width=”3” :stroke=”r7Color” :fill=”r7Color” />
<circle cx=”565.7” cy=”580.0” r=”9” stroke-width=”3” :stroke=”r8Color” :fill=”r8Color” />
<circle cx=”430.0” cy=”455.7” r=”9” stroke-width=”3” :stroke=”r9Color” :fill=”r9Color” />
</svg>
</div>
I need to get the drawing to rerender every update cycle with data from SignalR Client. Note: my SignalR Client & Vue.js plug-in are working fine. Something seems to be amiss with Vue.js’ reactivity here.
Solution :
How about adding key to component that you want redrawn ? With some properties you want to force redraw and changing the key o that component. For example
<template>
<div :key=”updateCounter” >
{someContent}
</div>
</template>
<script>
export default {
data() {
return {
updateCounter: 0
};
},
computed: {
valueToWatch() {some dynamic value}
},
watch: {
valueToWatch() {
this.updateCounter += 1
}
}
</script>
Here is great article about forcefully rerendering
The correct way to force vue.js to re-render a component