Disable / Stop / Prevent #click event on image element using condition - vuejs - vue.js

Question

I have below code:
<image
id="wheel-bg"
class="wheel-bg"
:x="-width/2"
:y="-height/2"
href="images/wheel-bg.png"
:width="width"
:height="height"
filter="drop-shadow(black 0px 0px 1rem)"
#click="spin"
></image>
I have a data property "rotationState" which can be "false" or "true".
rotationState = false means #click event should fire and
rotationState = true means #click event should not fire
I tried
#click="spin && rotationState"
I also tried:
#click.stop="rotationState"
#click="spin"
and
:disabled="rotationState"
but above methods don't work because I think I have #click event on an <image></image> element.
What I am trying to achieve is basically,
container.on('click', null); this is the code that was used when I first wrote the code in jquery / js.
Jquery Spin function code
container.on("click", spin); //this code triggers spin in jquery
function spin(d) {
container.on("click", null); //this code disables multiple spin from happening
spinCount++;
// First 2 spins
if (spinCount < totalSpins) {
//get random number of rotations + get random degree for "No Win"
// 1 to 28 or 211 to 239 deg
if (Math.random() < 0.5) {
rotation = ((Math.floor(Math.random() * 1) + 3) * 360) + (Math.floor(Math.random() * 28) + 1);
} else {
rotation = ((Math.floor(Math.random() * 1) + 3) * 360) + (Math.floor(Math.random() * 28) + 211);
}
duration = 10000; // 10 seconds
// Third spin
} else if (spinCount == totalSpins) {
//get random number of rotations + get random degree for options other than "No Win" and "Free Apple Earpods"
//31 to 119 deg or 151 to 209 deg or 271 to 359
if (Math.random() < 0.7) {
rotation = ((Math.floor(Math.random() * 1) + 5) * 360) + (Math.floor(Math.random() * 88) + 31);
} else if (Math.random() > 0.3 && Math.random() <= 0.7) {
rotation = ((Math.floor(Math.random() * 1) + 5) * 360) + (Math.floor(Math.random() * 58) + 151);
} else {
rotation = ((Math.floor(Math.random() * 1) + 5) * 360) + (Math.floor(Math.random() * 88) + 271);
}
duration = 15000; // 15 seconds
// Spins more than 3
} else {
alert("No more spins left");
container.on("click", null);
return;
}
updateAttempts(spinCount);
updateSpins(totalSpins - spinCount);
//Get selected array element
var degSelected = (rotation % 360) % 360;
if (
(degSelected >= 91 && degSelected <= 120) ||
(degSelected >= 181 && degSelected <= 210) ||
(degSelected >= 331 && degSelected <= 360)
) {
selected = 11;
} else if (
(degSelected >= 1 && degSelected <= 30) ||
(degSelected >= 121 && degSelected <= 150) ||
(degSelected >= 181 && degSelected <= 210) ||
(degSelected >= 211 && degSelected <= 240)
) {
selected = 10;
}else if (
(degSelected >= 31 && degSelected <= 60) ||
(degSelected >= 151 && degSelected <= 180) ||
(degSelected >= 271 && degSelected <= 300)
) {
selected = 9;
}else if (degSelected >= 241 && degSelected <= 270) {
selected = 6;
}else if (
(degSelected >= 61 && degSelected <= 90) ||
(degSelected >= 301 && degSelected <= 330)
) {
selected = 4;
}
vis.transition()
.duration(duration)
.ease(d3.easeExpOut)
.attrTween("transform", rotTween)
.each("end", function () {
//set prize value
prize = data[selected].value;
id = data[selected].id;
if(spinCount == 3) {
alert('Your Voucher: ' + data[selected].label);
}else {
alert('Better luck next time');
}
oldrotation = rotation;
container.on("click", spin);
});
img2.transition()
.duration(duration)
.ease(d3.easeExpOut)
.attrTween("transform", rotTween)
}

Answer 1

You can set the function of #click, based on the state of rotationState as mentioned before:
#click="rotationState ? spin() : null"