Disable button after loading does not work

[rrelmy]

We have a problem where a state change will not be correctly reflected after a state change.
https://jsfiddle.net/gvc3ryo1/7/

Changing the loading property overrides changes on the disabled property.
I am not aware of a workaround

I suspect calling the stop method clashes with the property change
https://github.com/hakimel/Ladda/blob/1f4586f7a1f2043b3d027c8bf471d39d489da1b8/js/ladda.js#L103

[rrelmy]

I found a potential solution, not sure if it is the best idea.

If the disabled property is passed explicitly from the component to the button a unwanted state change can be detected and fixed after changing the loading property:

  props: {
    // ...
    disabled: {
      type: Boolean,
      required: false
    },
    // ...
  },

<button ... :disabled="disabled">

  watch: {
    loading: function (loading) {
      loading ? this.ladda.start() : this.ladda.stop()

      // Workaround for https://github.com/zcfan/vue-ladda/issues/5
      Vue.nextTick().then(() => {
        this.$refs.ladda.disabled = this.disabled
      })
    },
    // ...

I can create a PR if this solution would be acceptable

[zcfan]

Weird behavior... Ladda should set disable to the previous state instead of reset to true 😂

Yes please create a PR, Thank you! And you might want to correct the behavior of ladda too, I think they'll be happy someone found this bug.