使用 Ladda 按钮

Question

我有一个 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 函数（想知道刷新是否发生得太快）但它不起作用（显然是因为它是异步的）。

你能告诉我我做错了什么吗？

谢谢

Answer 1

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

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

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>

如果您有任何问题，请告诉我。

使用 Ladda 按钮

Working with Ladda-buttons

javascript

jquery

vue.js