I am having trouble using a variable in a vue 3 app that has been emitted by a component Mags. The variable works in the importMags function, but I cannot get it read/used by the handleSubmit function. It is always 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><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>There are a few problems with your code snippet.
<form @submit.prevent="handleSubmit">From this line, we are expecting to call the handleSubmit() function, but it is not referenced in the setup() function. You have it defined, but you also need to return it.
Next, when you should declare nowMags at the beginning of the setup() function like so:
const nowMags = ref(null)And now in order to read or set the nowMags value in any function, you must call it like nowMags.value = x or x = nowMags.value or console.log(nowMags.value).
Here's a code snippet that should help piece things together for you.
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
}
};You declared nowMags inside the importMags() function. If you want it to be visible outside the function, you need to move the declaration there.
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),
};
},