0
227
ViewsVue3 computed property changing its value inside onMounted hook
I have just been using and learning Vue for a week, and developing a small vue3 application using a CDN because that's the requirement. I'm implementing using a composition api. I have a computed property which is shown below.
Note that state.allCvls is a reactive variable which is a result of an axios.get call from a rest api.
...
const allCvlCount = computed (() => {
return state.allCvls.length; // This value is generated from an axios call from a restapi.
});
...
onMounted (() => {
console.log(allCvlCount);
console.log(allCvlCount.value);
})
When I try to print the object and its value property, they have different values as shown in the image below.
I tried to create a test case and its not behaving the same way as above. Where can I start debugging to pin down the cause of this discrepancy.
Here is my test case which is working fine.
<!DOCTYPE html>
<html>
<head>
<style>
#app {
height: 400px;
}
</style>
</head>
<body>
<div id="app">
<!-- <v-chart autoresize :option="myOptions"/> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script>
const { createApp, reactive, computed, onMounted } = Vue
const app = createApp({
setup() {
const state = {
myReactiveVar: [{'name': 'foo', 'count': 5}, {'name': 'bar', 'count': 3}, {'name': 'xyz', 'count': 8}]
}
const myComputedProperty = computed(() => {
return state.myReactiveVar.filter(e => e.count <= 5).length;
});
onMounted(() => {
console.log(myComputedProperty);
console.log(myComputedProperty.value);
});
return {
state,
myComputedProperty
};
}
})
.mount("#app");
</script>
</body>
</html>
·
Juan Pablo Isaza
Answer question