JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios-mock-adapter.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>


<div id="app">
  <pre>
    {{logs}}
  </pre>
</div>

JavaScript

var mockAxios = new AxiosMockAdapter(axios);

var mock = {
	msg: 'Mock Axios!'
}

mockAxios.onGet('/api/msg').reply(200, mock)

var app = new Vue({
	el: '#app',
  data: function () {
  	return { 
      logs: []
    }
  },
  beforeCreate: function() {
  	this.msg = 'beforeCreate'
    axios.get('/api/msg').then((data) => {
      this.msg = 'beforeCreate: ' + data.data.msg
      this.addLog(this.msg + data.data.msg);
    })
  },
  created: function() {
  	this.msg = 'created'
    axios.get('/api/msg').then((data) => {
      this.msg = 'created: ' + data.data.msg
      this.addLog(this.msg + data.data.msg);
    })
  },
  beforeMount: function() {
  	this.msg = 'beforeMount'
    axios.get('/api/msg').then((data) => {
      this.msg = 'beforeMount: ' + data.data.msg
      this.addLog(this.msg + data.data.msg);
    })
  },
  mounted: function() {
  	this.msg = 'mounted'
  	axios.get('/api/msg').then((data) => {
      this.msg = data.data.msg
      this.addLog(this.msg + data.data.msg);
    })
  },
  methods: {
  	addLog: function (message) {
    	this.logs.push(message)
    }
  }

});