代码之家 › 专栏 › 技术社区 › Geoff_S

Vue切换不会恢复,只切换一次和一次

vue.js javascript

Geoff_S · 技术社区 · 7 年前

我觉得这应该是可行的,而且相当简单,但我一辈子都搞不清楚。我正在制作一个以“暂停”开头的按钮作为文本,然后当按下该按钮时,文本将更改为继续。

这很好,但它从不切换回恢复??我需要一对一的切换,只需点击将其从一个切换到另一个。

我在这里做错什么了?

模板

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

1 回复 | 直到 7 年前

Phil 7 年前

由于使用了未定义的 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前