Variable not defined within vue function

user_4282770 0
Viewed 55

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>

vue.js javascript
2 Answers

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
    }
 };

user_113714190

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),
    
    };
  },
user_77268270
Related