用vuejs怎么给提交按钮添加监听事件改变文字内容以避免看上去假死

Question

用vuejs怎么给提交按钮添加监听事件改变文字内容以避免看上去假死

比如有个提交按钮：

<div id="example">
<button type="submit" class="btn btn-primary btn-lg" v-on:click="submit">提交</button>
</div>

vuejs代码：

var vm = new Vue({
  el: '#example',
  data: {
    message: '正在提交...'
  },
  
  methods: {
    submit: function () {
      //这里代码怎么写？
      //要实现的效果：点击提交按钮的时候，提交按钮中的文字变为“正在提交...”,5秒钟后变回来。
      
    }
  }
})

要实现的效果：
点击提交按钮的时候，提交按钮中的文字变为“正在提交...”,5秒钟后变回来。

Answer 1

@cnzsb 说的对，思路可以参考这位朋友的。

自己第一次回答没过脑子…… 这里的 setTimeout 换成你自己的请求方法按需处理就行了

<div id="example">
  <button type="submit" v-on:click="submit">{{message}}</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '提交'
  },
  methods: {
    submit: function () {
      var self = this
      self.message = '正在提交...'

      setTimeout(function () {
          self.message = '提交'
      }, 5000)
    }
  }
})

---

如下是第一次不恰当的回答，反面案例

var vm = new Vue({
  el: '#example',
  data: {
    message: '正在提交...'
  },
  methods: {
    submit: function (event) {
      event.target.innerHTML = this.message
      
      setTimeout(function () {
          event.target.innerHTML = '提交'
      }, 5000)
    }
  }
})

Answer 2

在事件驱动的框架下，我认为不应该考虑到某个dom从而对其进行操作。前面的回答者简单的对你的问题进行了解决。我给你提供一个常规的处理方法。
在你点击提交的时候，会触发提交请求，那么这个时候就应该改变按钮内容，在ajax完成后（无论成功失败），再把按钮内容恢复过来即可。
重要的是要理解事件驱动，而不要总想dom操作。