Computed property cache failed with undefined variable? Computed never update, even when initializing variable

Hi all,
I’m fetching some datas (providers coordinates) from an API and put the data in a component which displays each provider from object like:

providers: [{ name: 'Provider1 Name', phone: 'Provider1 Phone' }, { name: 'Provider2 Name', phone: 'Provider2 Phone' }]

I just want to set a button with a “Show Number” text, which turn to the phone number when clicked.

To do it I’m using a property which does not exist in API and so when component is created: provider.phone_displayed and I’m using a computed to display text in button:

<a class="btn btn-outline-primary" :href="isPhoneDisplayedHref" @click.once.prevent="displayProviderPhone()">{{ isPhoneDisplayedText }}</a>
isPhoneDisplayedHref: function() {
	return (this.provider.phone_displayed) ? 'tel:'+ this.provider.phone : null;
},
isPhoneDisplayedText: function() {
	return (typeof this.provider.phone_displayed !== 'undefined' && this.provider.phone_displayed) ? this.provider.phone : 'Show phone';
}

When Show Phone button is clicked I set provider.phone_displayed to TRUE with a simple this.provider.phone_displayed = true;

I thought it would do the job… But no… Phone is never displayed.

I tried to modify the $root.providers[index].phone_displayed (tried with $emit or directly with this.$root).

I tried to initialize the variable inside of beforeCreate() event. Nothing worked.

I made a simplified fiddle to show you my problem here.

I could modify the API to add the phone_displayed property directly from the base but I don’t like the idea to add some useless data in PHP which will be only used in Vue.

Thanks for any advice.

Wow!! It definitely burned my head but I resolved it! The solution was finally pretty simple… As usual in those cases.

I think I tested eveyrthing and nothing:

  • Used beforeMounted to instantiate add phone_displayed to prop provider
  • Used beforeCreate to instantiate a data “isComponentLoaded” then set it to true in mounted() as said in this post
  • Used .then() to set componentLoaded to true
  • Map the providers array in the root of my app
  • And so many more which when I think about them: I was definitely desperate to just imagine that any of those would work… Like build Empire State Building with subway tickets…

And finally the solution was to map directly the response.data of axios before assign it to providers:

getProviders() {
	axios.get(`http://qaa.local/get-providers/`+this.lead_data.location.postal_code, {})
	.then(response => {
		response.data.map(provider => provider.phone_displayed = false)
		this.providers = response.data;
	})
	.catch(e => {
		this.axios_errors.push(e)
	});

}

The problem in your jsfiddle example that you use non-reactive property is_displayed in computed property

If phone_displayed doesn’t exist in this.provider it should be:
this.$set(this.provider, 'phone_displayed' , true)