Двойной вызов функции Vue.js

111

20 декабря 2020, 19:50

Подскажите, почему при клике на кнопку, функция вызывается два раза? Как сделать, что бы она вызывалась один раз?

new Vue({ 
  el: '#app', 
  data() { 
    return { 
      item: null, 
      loader: null, 
      loading: false, 
    } 
  }, 
  watch: { 
    loader() { 
      const l = this.loader 
      this[l] = !this[l] 
 
      setTimeout(() => (this[l] = false), 3000) 
      this.qwerty(); 
      this.loader = null 
    } 
  }, 
  methods: { 
    qwerty() { 
      console.log('double'); 
    }, 
  } 
})

.btn_text { 
  color: black; 
} 
 
.LoaderBtn { 
  border: 2px solid red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
<div id="app"> 
  <v-modal> 
    <v-btn class="LoaderBtn" :loading="loading" :disabled="loading" color="primary" @click="loader = 'loading'"> 
      <span class="btn_text"> 
      Accept Terms 
    </span> 
    </v-btn> 
  </v-modal> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

Answer 1

Потому что, в самом watch есть изменение переменной, за которой он наблюдает

new Vue({ 
  el: '#app', 
  data() { 
    return { 
      item: null, 
      loader: null, 
      loading: false, 
    } 
  }, 
  watch: { 
    loader() { 
      const l = this.loader 
      this[l] = !this[l] 
 
      setTimeout(() => (this[l] = false), 3000) 
      this.qwerty(); 
      
    } 
  }, 
  methods: { 
    qwerty() { 
      console.log('double'); 
    }, 
  } 
})

.btn_text { 
  color: black; 
} 
 
.LoaderBtn { 
  border: 2px solid red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
<div id="app"> 
  <v-modal> 
    <v-btn class="LoaderBtn" :loading="loading" :disabled="loading" color="primary" @click="loader = 'loading'"> 
      <span class="btn_text"> 
      Accept Terms 
    </span> 
    </v-btn> 
  </v-modal> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>