0
私の小さなVueアプリケーションでは、別のメソッド（buttonClick）内から異なるパラメータを使用して同じメソッド（emptyDivision）を呼び出そうとしています。私はそのメソッドの最初の呼び出しに5秒のタイムアウトを設定しましたが、buttonClickを実行してこれらの2つの関数をトリガすると、この遅延は認識されません。VueメソッドのsetTimeoutが機能しない
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="buttonClick">Simulate Placement</button>
<h1>Random Division 1</h1>
<p>{{A.One}}</p>
<p>{{A.Two}}</p>
<h1>Random Division 2</h1>
<p>{{B.One}}</P>
<p>{{B.Two}}</p>
</div>
<script type="text/javascript">
new Vue({
'el': '#app',
'data': {
'A': {'One': "", 'Two': "" },
'B': {'One': "", 'Two': "" },
'Division1': ["Steelers", "Ravens"],
'Division2': ["Broncos", "Raiders"],
},
'methods': {
'emptyDivision': function(division){
this.A[division] = this.popTeam(division)[0];
this.B[division] = this.popTeam(division)[0];
},
'popTeam': function(division) {
if (division === "One"){
return this.Division1.splice(Math.floor(Math.random()*this.Division1.length), 1);
}
return this.Division2.splice(Math.floor(Math.random()*this.Division2.length), 1);
},
'buttonClick': function() {
setTimeout(function() {console.log("This appears after 3 seconds")}, 3000);
setTimeout(this.emptyDivision("One"), 5000); /*Teams in division one
("Steelers" and "Ravens") should be propagated to the DOM after 5 seconds, but it's being
evaluated at the same time as the invocation to this.emptyDivision("Two") */
this.emptyDivision("Two"); /* I expect ("Broncos" and "Raiders" to be rendered to the DOM
first due to the timeout, but this is not happening*/
}
}
})
</script>
</body>
</html>
コンソールを検査した後、3秒のタイムアウトのログ文が評価され、予想される動作を生成するが、emptyDivision（「1」）に5秒のタイムアウトで説明するよう、作業をしていないと思われます私が上記のコードで残したコメント。