I am struggling with utilizing a variable in a vue 3 application that has been emitted by a component called Mags. The variable is functioning properly in the importMags function, however, I am unable to access it within the handleSubmit function. It consistently returns as null.
<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>