Vue JS - Clear Interval on mouseleave - vue.js

Question

I'm currently learning VueJS with a video course. I was doing an exercise on directives, but got carried away a little.
Anyway my goal is to get the "disco effect" by a mouseover on the "Disco Time"-button. That works fine, but I also want to clear the interval, when leaving the button.
I tried several things (e.g. calling clear interval in another method) and I'm pretty sure that the current solution isn't a nice one, but to my understanding it should at least work.
Can you tell me why it isn't working and how it would work? I also would be interested in nicer solutions (but using the directive, since this was my goal).
Thanks for helping a noobie (:
<script>
export default {
data() {
return {
showing: false,
color: 'lightgreen',
stopIt: false,
stopItt: false,
}
},
directives: {
'myEvent': {
bind(el, binding) {
const type = binding.arg
const fn = binding.value
el.addEventListener(binding.arg, binding.value)
}
}
},
methods: {
change() {
this.showing = !this.showing;
this.color == 'lightgreen' ? this.color = 'lightblue' : this.color = 'lightgreen';
},
disco() {
if (this.stopIt == false) {
var myDisco = setInterval(() => {
this.color == 'lightgreen' ? this.color = 'lightcoral' : this.color = 'lightgreen'
}, 100)
}
else if (this.stopIt == true) {
setTimeout(() => {
clearInterval(myDisco)}, 1000)
}
},
stopDisco() {
this.stopIt = true
//this.stopItt = true
this.disco();
},
}
}
</script>
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div :style="{color: color}">
<h1>Directives Exercise</h1>
</div>
<button v-myEvent:click="change" class="btn btn-primary">Show me!</button>
<button v-myEvent:mouseover="disco" v-myEvent:mouseleave="stopDisco" class="btn btn-primary">Disco Time!</button>
<p v-if="showing">
Now you see me!
</p>
<p>
{{ stopIt }}, {{ stopItt }}
</p>
</div>
</div>
</div>
</template>

Answer 1

The reason your current approach isn't working is that the myDisco variable in disco() is scoped to that function, so when you call it again to try to clear the interval, you get a new, empty myDisco instead of the one containing the interval ID.
One simple way to fix this is to just put the interval ID itself in data(), instead of the separate stopIt boolean:
new Vue({
el: '.container',
data() {
return {
myDisco: undefined,
color: 'lightgreen',
}
},
directives: {
'myEvent': {
bind(el, binding) {
el.addEventListener(binding.arg, binding.value)
}
}
},
methods: {
disco() {
this.stopDisco(); // just in case there's any chance of calling disco() twice in a row...
this.myDisco = setInterval(() => {
this.color == 'lightgreen' ? this.color = 'lightcoral' : this.color = 'lightgreen';
}, 100)
},
stopDisco() {
clearInterval(this.myDisco); // will be a harmless no-op if myDisco is false
this.myDisco = undefined; // not strictly necessary, but just to be tidy
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container">
<div :style="{color: color}">
<h1>Directives Exercise</h1>
</div>
<button v-my-event:mouseover="disco" v-my-event:mouseleave="stopDisco" class="btn btn-primary">Disco Time!</button>
<div>Interval ID: {{myDisco}}</div>
</div>

Answer 2

Each time you call disco, myDisco is a different variable. You can't clear the old one that way. Instead, have the callback clear itself:
disco() {
this.stopIt = false;
const myDisco = setInterval(() => {
this.color == 'lightgreen' ? this.color = 'lightcoral' : this.color = 'lightgreen';
if (this.stopIt) {
clearInterval(myDisco);
}
}, 100)
},
stopDisco() {
this.stopIt = true
},
Demo runnable snippet below.
new Vue({
el: '.container',
data() {
return {
showing: false,
color: 'lightgreen',
stopIt: false,
}
},
directives: {
'myEvent': {
bind(el, binding) {
const type = binding.arg
const fn = binding.value
el.addEventListener(binding.arg, binding.value)
}
}
},
methods: {
change() {
this.showing = !this.showing;
this.color == 'lightgreen' ? this.color = 'lightblue' : this.color = 'lightgreen';
},
disco() {
this.stopIt = false;
const myDisco = setInterval(() => {
this.color == 'lightgreen' ? this.color = 'lightcoral' : this.color = 'lightgreen';
if (this.stopIt) {
clearInterval(myDisco);
}
}, 100)
},
stopDisco() {
this.stopIt = true
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div :style="{color: color}">
<h1>Directives Exercise</h1>
</div>
<button v-my-event:click="change" class="btn btn-primary">Show me!</button>
<button v-my-event:mouseover="disco" v-my-event:mouseleave="stopDisco" class="btn btn-primary">Disco Time!</button>
<p v-if="showing">
Now you see me!
</p>
<p>
{{ stopIt }}, {{ stopItt }}
</p>
</div>
</div>
</div>