Vue变量未呈现条件元素v-if

时间:2019-06-27 07:15:27

标签: javascript vuejs2 vue-component vuetify.js

问题有两点。 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

0 个答案:

没有答案