Vue

by Steve

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
  <span> {{ endpointdata.answer }} </span>
  <button @click="deferredAlert">get yes or no</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: "#app",
  data: {
    endpointdata: []
  },
  methods: {
  	deferredAlert: function() {
      var self = this;
      this.fetchYesNo().then(() => {
        alert(self.endpointdata.answer);
      });
    },
  	fetchYesNo: function(){
      var self = this;
      return new Promise((resolve) => {
        $.ajax({
          url: 'https://yesno.wtf/api',
          type: "GET",
          success: function(result){
            self.endpointdata = result;
            resolve();
          }
        });
      });
    }
  }
})