问题有两点。 1.更新变量后,不会触发监视条件。 2.带有v-if的元素未显示。
Vue.component('comp1',{
data: () => ({
goClicked:false,
showResult:false,
}),
watch: {
goClicked(val,v){
console.log("goClicked changed...");
console.log(this.goClicked+"\t"+this.showResult);
},
showResult(val,v){
console.log("showResult changed...");
console.log(this.goClicked+"\t"+this.showResult);
}
},
methods:{
resetValues(){
this.goClicked=true;
this.showResult=false;
//DO SOMETHING
this.showResult=true;
this.goClicked=false;
}
},
template:`
<v-app id="inspire">
<p style="font-size:36px;">Testing Application.....</p>
<v-icon @click="resetValues">create</v-icon>
<div v-if="(!goClicked && !showResult)"><p>Initial....</p></div>
<div v-if="goClicked"><p>Loading Page... Please wait...</p></div>
<div v-if="showResult"><p>Result.... successs...</p></div>
</v-app>
`
})
我希望在调试时显示消息“正在加载页面...请稍候...”。但这没有发生。
这是codepen: https://codepen.io/satishvarada/pen/QXOLVz