Axios vue.js ajax example

yes no API: Request data with axios & vue.js

by kurimaron

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<div id="app">
  <div v-if="loading">
    loading...
  </div>
  <div v-else>
   <div class="gifImg">
     <img :src="yes_no.image" alt="hoge">
     <p>{{yes_no.answer}}</p>
   </div>
  </div>
</div>

CSS

.gifImg {
  position: relative;
  min-width: 100%;
}

.gifImg p {
  position: absolute;
  color: green;
  font-weight: bold;
  font-size: 3em;
  top: 50%;
  left: 50%;
  -webkit-transform: translate (-50%, -50%);
  transform: translate (-50%, -50%);
  padding: 0;
  margin: 0;
}

.gifImg img {
 /*  width: auto; */
  height: auto;
 min-width: 100%;
  max-height: 100%;
}

Vue

const URL = 'https://yesno.wtf/api';
new Vue({
	el: '#app',
	data() {
  	return {
    	loading: true,
      yes_no: []
    }
  },
  created() {
  	axios.get(URL).then((response) => {
      this.yes_no = response.data
      this.loading = false
    })
  }
})