toast ajax...

[midascodebreaker]

Ive been messing around with toast to use it during ajax call... when i receive response i set the data object toast to what is return in my controller. then broadcast... then pass in the toast object in show toast event....

  methods: {
      notify: function() {
          this.$http({url: '/notifications', method: 'GET'}).then(function (response) {
              this.$set('toast', response.data)
              this.$broadcast('show::toast', {success: this.toast.message})
            }, function (response) {
                this.$set('toast', response.data)
                this.$broadcast('show::toast', {error: this.toast.message})
            });
        }
  }

then in my view...

<button v-on:click="notify">Toast!</button>
<vs-toast
  :hide-progress ="toast.hideProgressbar"
  :duration ="toast.duration"
  :position ="toast.position"
  :on-ajax-errors = "toast.onAjaxErrors"
  :context ="toast.context">
</vs-toast>

which is binded to this data object

toast:{
        context: 'success', //['success','info', 'warning', 'light', 'dark']
        hideProgressbar: true,
        position: 'top right',
        duration: 1000,
        onAjaxErrors: true, // true if you want to communicate with ajax
        message: 'default message'
    }

but when i check vue dev tools this is the value of each props

context: "" 
duration: 6000 
message: "Done!" 

It went back to the default value...

how to properly use it using vue-resource plugin? thanks, im bit twisted

[midascodebreaker]

im getting DONE in message

notify: function() {
           this.$http({url: '/notifications', method: 'GET'}).then(function (response) {
               this.$set('toast', response.data)
               console.log(this.toast)
               this.$broadcast('show::toast', {success: this.toast.message})
               console.log(this.toast)
             }, function (response) {
                 this.$set('toast', response.data)
                 console.log(this.toast)
                 this.$broadcast('show::toast', {error: this.toast.message})
                 console.log(this.toast)
             });
         }

but at using es 6 template string... Im getting undefine...

notify: function() {
           this.$http({url: '/notifications', method: 'GET'}).then(function (response) {
               this.$set('toast', response.data)
               console.log(this.toast)
               this.$broadcast('show::toast', {success: `${this.toast.message}`)
               console.log(this.toast)
             }, function (response) {
                 this.$set('toast', response.data)
                 console.log(this.toast)
                 this.$broadcast('show::toast', {error: `${this.toast.message}`)
                 console.log(this.toast)
             });
         }

i hope there is a better api that you just passed in context and message props in options of event of broadcast as such this.$broadcast('show::toast', this.toast.context , this.toast.message)