JSFiddle - React, Tailwind, and code Playground

by Phil Brown

HTML

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <my-component @emitshowflash="catchEvent"></my-component>
  <pre>flash = {{ flash }}</pre>
</div>

JavaScript

Vue.component('MyComponent', {
  template: `<div><button @click="updateShippingAddress">Update shipping address</button></div>`,
  data () {
  	return { success: true }
  },
  methods: {
    updateShippingAddress: function() {
      axios.post('/echo/json/', `json=${encodeURIComponent(JSON.stringify({success: this.success}))}`, {
        headers: {
          'Content-type': 'application/x-www-form-urlencoded'
        }
      }).then((response) => {
        if (response.data.success) {
          let msg = "Address updated!"
          this.showFlash(msg, true)
        } else {
        	throw res
        }
      }).catch(err => {
        console.error("errrrr")
        let msg = "Not valid address. Please check address again."
        this.showFlash(msg, true)
      })
      this.success = !this.success
    },
    showFlash: function(msg, bool) {
      let data = { msg, bool }
      this.$emit('emitshowflash', data)
    }
  }
})

new Vue({
	el: '#app',
  data: { flash: {} },
  methods: {
  	catchEvent (data) {
    	this.flash = data
    }
  }
})