Dice "todo lo que se devuelva aquí estará disponible para el resto del componente" ( https://v3.vuejs.org/guide/composition-api-introduction.html#setup-component-option ), pero recibí este error en c que es una variable devuelta en la instalación: No se puede encontrar el nombre 'c'.ts(2304).
<script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup(props) { let c = 123; return { c } }, methods: { increment() { c; } } }) </script>¿Alguna ayuda?
Debe acceder a las variables expuestas a través del método de setup utilizando this palabra clave en sus métodos.
Pero esta es solo una mala manera de proceder porque está mezclando la API de composition api de options api . Consulteeste hilo para comprender la diferencia entre los dos.
Vue.createApp({ setup(props) { let c = 123; return { c } }, methods: { increment() { console.log(this.c); } } }).mount('#app') <script src="https://unpkg.com/vue@next"></script> <div id="app"> <button @click="increment">Increment</button> </div> Vue.createApp({ setup(props) { const c = Vue.ref(123); const increment = () => c.value++; return { c, increment } }, }).mount('#app') <script src="https://unpkg.com/vue@next"></script> <div id="app"> <span>{{ c }}</span><br/><br/> <button @click="increment">Increment</button> </div>Tiene dos formas de crear una función en vue 3.
Aquí el esto. no existe, por lo que puede escribir una función simple como
const add = () => ++c.valueAquí, la distancia aún no existe, por lo que puede escribir c sin esto. Recuerde exportar la función y crear la variable c con ref o no se actualizará
Puede usar de esta manera, pero necesita usar esto. param porque la distancia ahora existe