CODEWITHSUNDEEP
vue.js
user1833620
user1833620

Reputation: 781

How to toggle button in vuejs

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

Upvotes: 0

Views: 2216

Answers (2)

Bulent
Bulent

Reputation: 3411

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 
  }
}

Upvotes: 1

hgb123
hgb123

Reputation: 14881

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>

Upvotes: 1

Related Questions