javascript - Vue 在 :click Seems to Call All Methods 上

Question

我目前正在学习 Vue，我遇到了一个问题，希望有人能帮助我解决。

当使用 v-on:click 指令调用方法时，如果该方法也在别处使用，则将调用所有其他实例方法。

HTML:

<div id="exercise">
    <div><button class="test" v-on:click="newCheck()">New Challenge</button>
        <p >Success check is: {{ passCheck }}</p>
    </div>
    <div>
        <button class="roll" v-on:click="roll20()">Roll!</button>
        <p>You Rolled a {{ roll20() }}</p>
    </div>
</div>

JS:

new Vue({
    el: '#exercise',
    data: {
        yourRoll: '10',
        passCheck: '10',    
    },
    methods: {
        roll20: function(){
            this.yourRoll = Math.round(Math.random()*19)+1;
            return this.yourRoll;
        },
        newCheck: function(){
            this.passCheck = Math.round(Math.random()*19)+1;
        }
    }
});

当在第二段中使用 {{ roll20() }} 时，单击“新挑战”按钮会同时运行 roll20() 和 newCheck()。但是，如果在第二段中使用 {{ yourRoll }}，则不会发生这种情况。

在这两种情况下，点击“滚动!”只运行 roll20()。

谁能帮忙解释一下这里发生了什么？

这是问题的代码笔: Codepen of code

注意:我最终通过使用不同的方法绕过了这个问题，但我仍然想知道为什么会这样:Working Approach

Answer 1

每当 DOM 更新时，它将再次运行roll20，因为行:

<p>You Rolled a {{ roll20() }}</p>

因此任何触发更新的东西都会因此触发 roll20。

现在，因为模板:

<div><button class="test" v-on:click="newCheck()">New Challenge</button>

我们知道，当您点击 New Challenge 时，它会调用 newCheck 方法。

并且由于 newCheck 方法更改了模板中使用的变量 (passCheck):

    newCheck: function(){
        this.passCheck = Math.round(Math.random()*19)+1;
    }

这里用的是:

    <p>Success check is: {{ passCheck }}</p>

更改 passCheck 将触发 DOM 更新。并且 DOM 更新将自动调用 roll20(由于本答案第一段所述的原因)。

---

解决方法:

最简单的方法就是不在模板中调用 roll20。而且，由于 roll20 实际上更新了 yourRoll 属性:

    roll20: function(){
        this.yourRoll = Math.round(Math.random()*19)+1;
        return this.yourRoll;
    },

您可以只在模板中使用 yourRoll，而不是 roll20():

<p>You Rolled a {{ yourRoll }}</p>

代码笔:https://codepen.io/acdcjunior/pen/PePBeo