0
231
VistasLa propiedad calculada de Vue3 cambia su valor dentro del gancho onMounted
Acabo de usar y aprender Vue durante una semana y desarrollar una pequeña aplicación vue3 usando un CDN porque ese es el requisito. Estoy implementando usando una API de composición. Tengo una propiedad calculada que se muestra a continuación.
Tenga en cuenta que state.allCvls es una variable reactiva que es el resultado de una llamada axios.get desde una API de descanso.
... 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); })Cuando trato de imprimir el objeto y su propiedad de valor, tienen valores diferentes como se muestra en la imagen a continuación.
Traté de crear un caso de prueba y no se comporta de la misma manera que arriba. ¿Dónde puedo comenzar a depurar para precisar la causa de esta discrepancia?
Aquí está mi caso de prueba que funciona bien.
<!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
Responde la pregunta