javascript - 使用Ladda按钮

我有一个ladda按钮，如下所示。

<button class="btn btn-primary btn-xs ladda-button"
data-style="slide-left" data-size="xs" v-on:click="refreshPage()">Refresh</button>

VueJs负责触发onClick事件。单击该按钮时，将引发以下功能

    refreshPage: function() {
        that = this;
        Ladda.bind( '.ladda-button', {
            callback: function( instance ) {
                instance.start();
                console.log(this);
                that.getProjectEvents();
                that.getIgnoredEvents();
                toastr.info('Refresh was done.');
                instance.stop();
            }
        } );

    }

getProjectEvents代码如下

    getProjectEvents: function() {
        this.$http.get('/project/exceptions/'+url(-1)).success(function(response) {
           this.$set('events', response);
        });
    },

getIgnoredEvents如下

    getIgnoredEvents : function() {
       this.$http.get('/exceptions/ignoredExceptions/'+ url(-1)).success(function(response) {
          this.$set('ignoredExceptions', response);
       });
    },

getProjectEvents和getIgnoredEvents都在同一个JS文件中定义。

问题

当我单击按钮时，微调器不会显示。但是，当我从两个方法（getProjectEvents和getIgnoredEvents）中提取代码并放入回调中时，一切开始起作用。我想知道为什么在调用函数时没有调用它！

我也尝试过使用setTimeOut函数（想知道刷新是否进行得太快），但是它不起作用（显然是因为它是异步的）。

您能告诉我我在做什么错吗？

谢谢

最佳答案

我认为您的问题是您正在http调用的成功方法之外调用instance.stop()，因为这是保证即使您仍在等待结果，代码仍将继续运行，以解决此问题，我将需要在您的get请求中移动instance.stop（）。

我准备了这个小JSfiddle，它显示ladda在vue.js click事件中工作。

https://jsfiddle.net/peternmcarthur/mnhverer/

new Vue({
    el: '#buttonExample',
    data: {
    },
    methods: {
        showSpinner: function() {
            var l = Ladda.create(document.querySelector('.ladda-button'));
            l.start();
            setTimeout(function() {
                l.stop();
            }, 1000);
        }
    }
});

<section class="button-demo">
    <h3>expand-left</h3>
    <button v-on:click="showSpinner" id="buttonExample" class="ladda-button" data-color="green" data-style="expand-left">
        <span class="ladda-label">Submit</span>
        <span class="ladda-spinner"></span>
    </button>
</section>

这是另一个显示ladda处理get请求的示例：https://jsfiddle.net/peternmcarthur/pLrjw98a/3/

new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!',
      someData: []
  },
  methods: {
      getGithubDetails: function() {
         var l = Ladda.create(document.querySelector('.ladda-button'));
         l.start();
         this.$http.get('https://api.github.com/users/peternmcarthur', function (data, status, request) {

         }).success(function (data, status, request) {
            this.$set('profileInfo', data)
            l.stop();
        }).error(function (data, status, request) {
            l.stop();
        })
    }
}
});
Vue.http.options.root = '/root';

<section class="button-demo" id="app">
    {{ profileInfo.name }}
    <h3>expand-left</h3>
    <button v-on:click="getGithubDetails" id="buttonExample" class="ladda-button" data-color="green" data-style="expand-left">
        <span class="ladda-label">Get github username</span>
        <span class="ladda-spinner"></span>
    </button>
</section>

如果您有任何问题，请通知我。

关于javascript - 使用Ladda按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33875658/