He perdido mi tiempo para esto. Estoy usando la API de opciones de Vue 3 anteriormente y estoy intentando cambiar a la API de composición. Quiero enviar un objeto a la matriz, pero el estado no actualiza el valor, ¿por qué sucede esto?
<script> export default { setup() { const state = reactive([]) function myFunction() { state.push({'item':1}) console.log(state); // state change } watchEffect(() => { console.log(state) // state doesn't change }) return { myFunction } } } </script> <template> <button @click="myFunction()">Click Here</button> </template>Tienes un error de sintaxis en tu código. La declaración de la función debe ser como function myFunction() { ... en lugar de function myFunction {...
Siempre revise la consola del navegador para ver si hay algún error antes de preguntar en Internet...
const app = Vue.createApp({ setup() { const state = Vue.reactive([]) function myFunction() { state.push({ 'item': 1 }) console.log(state); // state change } Vue.watchEffect(() => { console.log(state) // state doesn't change }) return { myFunction } } }) app.mount("#app") <script src="https://cdn.jsdelivr.net/npm/vue@3.2.26/dist/vue.global.min.js"></script> <div id="app"> <button @click="myFunction()">Click Here</button> </div>