CODEWITHSUNDEEP
javascriptvue.js
Geoff_S
Geoff_S

Reputation: 5107

Vue toggle won't revert back, only toggles one way and once

I feel like this should be working and is rather simple, but I can't for the life of me figure this out. I'm making a button currently that starts with "Pause" as the text, then when pressed the button text changes to Resume

This works perfectly, but it never toggles back to resume?? I need this to be a one to one toggle, simply clicking changes it from one to the other.

What am I doing wrong here?

template 

<button class="btn btn-primary btn-block" v-on:click="pauseTask" type="button" role="button" id="" aria-expanded="false" style=" color: #6c757d border:none; border-radius: .15;">
    {{ pauseButton.text }}
</button>

Vue

data() {
    return {
        pauseButton: {
            text:'Pause'
        },
        isOpen: true
    }
},
pauseTask: function() {
      this.isOpen = !this.isOpen;
      this.pauseButton.text = app.isOpen ? 'Pause' : 'Resume';
    },

Upvotes: 0

Views: 394

Answers (1)

Phil
Phil

Reputation: 164729

Looks like a typo due to your use of the undefined app variable.

I would suggest you use a computed property to decide what text to show so you're not maintaining two separate data properties.

new Vue({
  el: '#app',
  data: () => ({ isOpen: true }),
  computed: {
    pauseButtonText () {
      return this.isOpen ? 'Pause' : 'Resume'
    }
  },
  methods: {
    togglePause () {
      this.isOpen = !this.isOpen
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <button @click="togglePause" type="button">
      {{ pauseButtonText }}
  </button>
</div>

Upvotes: 2

Related Questions