Estoy tratando de cambiar una variable que tiene un tipo de datos 'booleano' . Cuando la página se carga por primera vez, los datos funcionan bien. Sin embargo, cuando se recarga la página, la variable se actualiza localmente en el método, pero no en la sección de datos globales. Por lo tanto, en la consola, sigo recibiendo un error "Error de tipo no capturado (en promesa): no se puede leer la propiedad 'valor' de indefinido en invocarDirectiveHook"
¿Hay algo que me he perdido?
<template> <p>Value: {{ val }}</p> <button @click="changeMe">Click Me</button> </template> <script> import { ref } from 'vue'; export default { data() { return { val: ref(false); }, }, methods: { changeMe() { this.val = !this.val; } } } </script>por favor, no mezcle la API de opciones con la API de composición
Vue.createApp({ data() { return { val: false } }, methods: { changeMe() { this.val = !this.val } } }).mount('#demo') <script src="https://unpkg.com/vue@next"></script> <div id="demo" class="demo"> <p>Value: {{ val }}</p> <button @click="changeMe">Click Me</button> </div> const { createApp, ref } = Vue; const app = createApp({ setup() { let val = ref(false) function changeMe() { val.value = !val.value } return { val, changeMe } } }); app.mount("#app"); <script src="https://unpkg.com/vue@next"></script> <div id="app"> <p>Value: {{ val }}</p> <button @click="changeMe">Click Me</button> </div> // Composition API <template> <p>Value: {{ val }}</p> <button @click="changeMe">Click Me</button> </template> <script setup> import { ref } from 'vue' const val = ref(false) function changeMe() { val.value = !val.value } </script> la <script setup> ahora está incluida en la versión 3.2