[Vuejs]-Working with Ladda-buttons

by

2👍

✅

I think your problem is that you’re calling the instance.stop() outside of the success method of the http call, because these are promises the code is continuing to run even though you’re still waiting for the results, to resolve this you’ll need to move the instance.stop() inside your get requests.

I prepared this little JSfiddle that shows ladda working within a vue.js click event.

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>

And here is another that shows ladda working with a get request: 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>

If you have any questions let me know.

👤Peter McArthur

Leave a comment