我有下面的代码：

<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>

我有一个数据属性“rotationState”，它可以是“false”或“true”。
rotationState = false表示应激发@click事件并
rotationState = true表示不应激发@click事件
我试过了

@click="spin && rotationState"

我也试探着：

@click.stop="rotationState"
@click="spin"

和

:disabled="rotationState"

但是上面的方法不起作用，因为我认为在<image></image>元素上有@click事件。
我想要达到的基本上是，
container.on('click', null);这是我第一次在jquery / js中编写代码时使用的代码。
Jquery Spin函数代码

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)
   
}