Búsqueda de sitios web

typescript - El valor devuelto en la configuración de Vue3 no se puede encontrar en el resto de ese componente

Dice "cualquier cosa devuelta aquí estará disponible para el resto del componente"(https://v3.vuejs.org/guide/composition-api-introduction.html#setup-component-option), pero obtuve este error en c, que es una variable devuelta en setup: 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?

Respuesta #1

Necesitas acceder a las variables expuestas a través del método setup usando la palabra clave this en tus métodos.

Advertencia :

Pero esta es solo una mala forma de proceder porque estás mezclando composition api con options api. Consulta este hilo para entender 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>
Forma correcta de lograrlo usando la API de Composición:

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>

Respuesta #2

Tienes dos formas de crear una función en Vue 3.

  • Agrega dentro del método de configuración (mejor)

Aquí esto. no existe, así que puedes escribir una función simple como

const add = () => ++c.value

Aquí, la instancia aún no existe, así que puedes escribir c sin esto. Recuerda exportar la función y crear la variable c con ref o no se actualizará

  • Usa el objeto método como lo hiciste

Puedes usar esta manera pero necesitas usar este. parámetro porque la instancia ahora existe

Artículos relacionados