setIntervalによる入力時の加算が機能しない

Question

私のコードを見てくださいhttps://jsfiddle.net/kL5d4y08/ "change"ボタンをクリックすると入力がゼロからカウントアップされますが、入力を表示すると入力からの値は等しくなります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') 

Answer 1

は基本的に、ここにあなたが作成された区間を停止する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>