I have below code:

<image
    id="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)
   
}

CodePudding user response：

You can set the function of @click, based on the state of rotationState as mentioned before:

 @click="rotationState ? spin() : null"