Vue Components With Internal Data
When you write components in vue you sometimes need some internal data in each component, to handle internal behavior.
Like when I had a problem with formating numeric texts.
The component was rendered correctly, but, the first time the user entered the input the format was lost.
I realized that the $refs
was undefined and the format function was called again only when the user typed a value and the event input
was fired.
So I added a internal data that was changed when the component was mounted and this behavior disappeared.
First add the data in the component:
data: function () {
return { mounted: false }
},
And changed the value in mounted
method:
mounted() {
this.mounted = true;
},
And changed my computed
value to check the value of the data:
computed: {
awesomeValue: {
get: function () {
//HERE I CHECK THE VALUE
if (!this.mounted) {
return;
}
//... DO THINGS TO GET VALUE
return valor;
},
set: function (value) {
//... DO THINGS TO SET VALUE
}
},