Vue切换不会恢复，只会切换一次

Question

我觉得这应该可以工作并且相当简单，但我一生都无法弄清楚这一点。我正在制作一个以“暂停”作为文本开头的按钮，然后当按下按钮时，文本会变为 Resume

这很好用，但它永远不会切换回恢复？我需要这是一对一的切换，只需单击即可将其从一个切换到另一个。

我在这里做错了什么？

模板

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

Answer 1

由于您使用了未定义的 app 变量，这看起来像是一个错字。

我建议您使用计算属性来决定要显示的文本，这样您就不必维护两个单独的数据属性。

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>