Vue: show component depends on API status

Question

I need help in vue-cli to show component which depends on status returns from API. I think the problem is to rebuild DOM but I did in beforeMount and it doesn`t work.

First, it should check the status from API, it should be true or false if false then show component which v-if has false.

Please help to show me what I do wrong :|

<template>
  <div v-if="status === false ">First component</div>
  <div v-if="status === true ">Second component</div>
</template>

<script type="text/javascript">
  export default  {
   data() {
    return {
     status,
    }
   },
   created: function () {
    $.getJSON('linkAPI', function (json) {
      this.status = json.state;
    })
   }
  }
</script>

Answer 1

this in a callback is not what you think it is. Try...

<div v-if="status === false ">First component</div>
<div v-if="status === true ">Second component</div>


export default  {
 data() {
  return {
   status,
  }
 },
 created: function () {
  var me = this;
  $.getJSON('linkAPI', function (json) {
    me.status = json.state;
  })
 }
}