Переменные Vue не отображают условный элемент v-if - PullRequest
Новая
       10

Переменные Vue не отображают условный элемент v-if

0 голосов
/ 27 июня 2019

Проблема в двух вещах.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>
`
})

Я ожидаю, что при отладке будет показано сообщение "Загрузка страницы ... Пожалуйста, подождите ...".Но этого не происходит.

Вот кодекс: https://codepen.io/satishvarada/pen/QXOLVz

...