The Vue toggle feature remains locked in place and cannot be toggled back, it only switches in one direction and cannot

Question

The Vue toggle feature remains locked in place and cannot be toggled back, it only switches in one direction and cannot

I just can't seem to get this simple button toggle working properly. I have a button that starts with the text "Pause" and when clicked, it should change to "Resume". However, while it changes to "Resume" initially, it never toggles back to "Pause" when clicked again.

What am I missing here?

Here's my code:

<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';
    },

javascript vue.js

Answer 1

Answer №1

Seems like there is a typo in your code, possibly caused by the undefined app variable.

To streamline your code and avoid managing two separate data properties, I recommend using a computed property to determine which text to display.

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>

Answer 2

Seems like there is a typo in your code, possibly caused by the undefined app variable.

To streamline your code and avoid managing two separate data properties, I recommend using a computed property to determine which text to display.

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>

The Vue toggle feature remains locked in place and cannot be toggled back, it only switches in one direction and cannot

Answer №1

Similar questions

Exploring AngularJS: Understanding the Differences Between $http's Success and Then

In search of assistance with creating a function that can transform an asynchronous function into a time-limited version

Accessing data from arrays containing objects through an AJAX Request

Tips for synchronizing with animation completion in ui-router's $stateChangeStart event

Selecting items using raycasting

Tips for changing information in a child document using mongoose

Redirect in Vue once store information is obtained

The binding of a bound element within an ngIf directive does not automatically update

Move a div by dragging and dropping it into another div

Trouble with select box initialization resolved

Trouble with split() in jQuery/JavaScript - A straightforward issue

Can you share the outcomes of executing a Node.js program in real-time?

Secure this Ajax reply

Integrating eBay API with Node.js

Develop universal style classifications for JSS within material-ui

Is there a way to position one DIV behind another?

Issue with generating random cells in a table using a loop

Transform JSON code from JQuery to PHP

What does this Javascript error mean?: TypeError - Trying to read the 'id' property of an undefined value

Learn how to dynamically change the location of a Google Map using React