VueJS: Computed with undefined data

by RomainMazB

HTML

<html>
  <body>
    <div id="app">
      <button @click="getProviders()">Get Providers from API</button>
      <provider v-for="(provider, index) in providers" :provider="provider" :key="index"></provider>
    </div>
  </body>
</html>

JavaScript

Vue.component('provider', {
  data: function () {
    return {
    }
  },
  template: '{{ provider.name }} <a :href="isPhoneDisplayedHref" @click.once.prevent="displayProviderPhone()">{{ isPhoneDisplayedText }}</a>',
  computed: {
    isPhoneDisplayedHref: function() {
      return (this.provider.phone_displayed) ? 'tel:'+ this.provider.phone : null;
    },
    isPhoneDisplayedText: function() {
      return (this.provider.phone_displayed) ? this.provider.phone : 'Show phone';
    }
  }
})

const App = new Vue({
	el: '#app',
  data: {
    axios_errors: [],
    providers: {}
  },
  methods: {
  	turnToTrue() {
    	this.is_displayed = true;
      this.$refs.fakeConsole.innerHTML += '<li>this.is_displayed = '+this.is_displayed+'</li>';
      this.$refs.fakeConsole.innerHTML += '<li>is_displayed_computed returns '+this.is_displayed_computed+'</li><br>';
    },
    getProviders() {
      fetch("/echo/json/", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8"
        },
        data: JSON.stringify({first: { name: 'Name of first', phone: '0000000000'},second: { name: 'Name of second', phone: '0000000000'},third: { name: 'Name of third', phone: '0000000000'}})
        })
        .then((response) => {
        	this.providers = response.data;
          console.table(response);
        })
        .catch((error) => {
          console.error(error)
        });
    }
  },
  computed: {
    is_displayed_computed() {
      return (typeof this.is_displayed !== 'undefined' && this.is_displayed) ? 'TRUE' : 'FALSE';
    }
  },
  beforeCreate() {
  	this.is_displayed = false;
  }
});