我目前正在学习 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
最佳答案
每当 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>
关于javascript - Vue 在 :click Seems to Call All Methods 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49969345/