Tengo problemas para usar una variable en una aplicación vue 3 que ha sido emitida por un componente Mags. La variable funciona en la función importMags, pero no puedo hacer que la función handleSubmit la lea/utilice. Siempre es nulo.
<template> <form @submit.prevent="handleSubmit"> <Mags name="magResults" @selectedtags="importMags"> </Mags> <q-btn label="Submit" type="submit" /> </form> </template> <script> import { ref } from "vue"; export default { name: "Name", components: { Mags }, setup() { function handleSubmit() { console.log(nowMags); } function importMags(selectedMags) { let nowMags = selectedMags; return nowMags; } return { importMags, nowMags: ref(null), selectedMags: ref(null), }; }, }; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>Hay algunos problemas con su fragmento de código.
<form @submit.prevent="handleSubmit"> Desde esta línea, esperamos llamar a la función handleSubmit() , pero no se hace referencia a ella en la función setup() . Lo tienes definido, pero también necesitas devolverlo.
A continuación, cuando deba declarar nowMags al principio de la función setup() así:
const nowMags = ref(null) Y ahora, para leer o establecer el valor de nowMags en cualquier función, debe llamarlo como nowMags.value = x o x = nowMags.value o console.log(nowMags.value) .
Aquí hay un fragmento de código que debería ayudarlo a reconstruir las cosas.
setup() { // Define data variables here const nowMags = ref(null) const selectedMags = ref(null) // Define functions here const handleSubmit = () => { console.log(nowMags.value) } const importMags(selectedMags) { nowMags.value = selectedMags return nowMags.value } return { nowMags, selectedMags, importMags, handleSubmit } };nowMags dentro de la función importMags() . Si desea que sea visible fuera de la función, debe mover la declaración allí.
components: { Mags }, setup() { let nowMags; // maybe give it an initial value? function handleSubmit() { console.log(nowMags); } function importMags(selectedMags) { nowMags = selectedMags; return nowMags; } return { importMags, nowMags: ref(null), selectedMags: ref(null), }; },