Добавление на вход через setInterval не работает

Question

Добавление на вход через setInterval не работает

1

Посмотрите на мой код https://jsfiddle.net/kL5d4y08/ Когда я нажимаю кнопку "изменить", вход должен отсчитываться от нуля, чтобы скрыть этот ввод, но когда я показываю вход, значение от входа должно быть равно 0 еще раз. Как я могу это сделать?

<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <input :value="change" v-if="val1">
  <br/>
  <button @click="switchOn">Change</button>


</div>

var Main = {
    data() {
      return {
        val1: false,
                val2: 0,
      }
    },
    methods: {
    switchOn(){
    this.val1=this.val1==false?true:false
    },
    addUp(){
    setInterval(function(){this.val2++},2000);
    }
    },
    computed:{
    change(){ this.addUp(); return this.val2; }

    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

syryls 23 окт. 2017, в 19:11

Источник

0

Ах да спасибо
syryls 23 окт. 2017, в 17:07
0

@NisargShah Берт
syryls 24 окт. 2017, в 12:32

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Bert · Answer 1 · 2017-10-24T19-02-00.000Z

В принципе, здесь вам нужно использовать clearInterval чтобы остановить созданный интервал и сбросить счетчик до нуля.

console.clear()
var Main = {
  data() {
    return {
      val1: false,
      val2: 0,
      interval: null
    }
  },
  methods: {
    switchOn(){
      this.val1 = !this.val1
      if (!this.val1){
        clearInterval(this.interval)
        this.interval = null
        this.val2 = 0
      } else {
       this.addUp()
      }
    },
    addUp(){
      this.interval = setInterval(() => this.val2++, 2000);
    }
  },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="val2" v-if="val1">
  <br/>
  <button @click="switchOn">Change</button>
  {{val1}}: {{val2}}

</div>