I've encountered an issue when trying to register an event callback on an SVG button while conditionally rendering it. For some reason, the @click event callback is not being registered, even if the condition is initially true. Interestingly, everything works fine once I remove the v-if directive. Is this behavior normal? Are there any workarounds for this?
Note: It seems to work fine without using the showControls variable and simply supplying v-if=true...
Here’s the code snippet of my component:
<template>
<div id="svg-container" class="svg-container">
<svg id="svg-canvas-outer" viewBox="0 0 1000 1000">
<svg id="svg-canvas-inner" :viewBox="viewBox">
<slot id="svg-content"></slot>
</svg>
<g transform="translate(30,30)" v-if="showControls">
<g class="svg-button btn btn-primary" @click="zoomIn">
<circle class="button" cx="0" cy="0" r="20"/>
<path d="M 0 10 H 10 V 0 H 20 V 10 H 30 V 20 H 20 V 30 H 10 V 20 H 0 Z" fill="white"
transform="translate(-15,-15)"/>
</g>
<g class="svg-button" transform="translate(-25, 25)" @click="resetView">
<rect fill="black" height="30" width="50"/>
<text dominant-baseline="middle" fill="white" text-anchor="middle" transform="translate(25, 15)">RESET</text>
</g>
<g class="svg-button" transform="translate(0, 80)" @click="zoomOut">
<circle class="button" cx="0" cy="0" fill="black" r="20"/>
<path d="M0 10 H 30 V20 H0 Z" fill="white" transform="translate(-15,-15)"/>
</g>
</g>
</svg>
</div>
</template>
<script>
export default {
name: 'SvgContainer',
props: ['width', 'height'],
data() {
return {
showControls: true,
controlsWidthBase: 60,
controlsHeightBase: 120,
viewBoxWidth: this.width,
viewBoxHeight: this.height,
viewBoxScale: 1.0,
viewBoxX: 0,
viewBoxY: 0,
startPoint: null,
endPanX: 0,
endPanY: 0,
currentlyPanning: false,
svgElement: undefined,
mousePos: '',
};
},
computed: {
viewBox() {
return `${this.viewBoxX} ${this.viewBoxY} ${this.scaledViewBoxWidth} ${this.scaledViewBoxHeight}`;
},
// Other computed properties...
},
methods: {
// Various methods...
},
mounted() {
this.bindEvents();
},
};
</script>
<style scoped>
</style>