I have play and pause buttons.
How to make them toggle button(show/hide) in Vue?
This is my code so far,
<button @click="slickPause" v-if="">slickPause</button>
<button @click="slickPlay" v-else>slickPlay</button>
methods: {
slickPause() {
this.$refs.carousel.pause();
},
slickPlay() {
this.$refs.carousel.play();
}
please help
You could make a state for playing and toggle it
new Vue({
el: '#app',
data: {
playing: false
},
methods: {
slickPause() {
// this.$refs.carousel.pause();
this.playing = false
},
slickPlay() {
// this.$refs.carousel.play();
this.playing = true
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="slickPause" v-if="playing">slickPause</button>
<button @click="slickPlay" v-else>slickPlay</button>
</div>This should work.
<button @click="togglePlay">
{{ isPlaying ? slickPause : slickPlay }}
</button>
data() {
return {
isPlaying: false
}
},
methods: {
togglePlay() {
let method = this.isPlaying ? pause : play;
this.$refs.carousel[method]();
this.isPlaying = !this.isPlaying
}
}
