Переменная, не определенная в функции vue

#javascript #vue.js

Вопрос:

У меня возникли проблемы с использованием переменной в приложении vue 3, которая была выдана журналом компонентов. Переменная работает в функции importMags, но я не могу заставить ее читать/использовать функцию handleSubmit. Он всегда равен нулю.

 lt;templategt;  lt;form @submit.prevent="handleSubmit"gt;  lt;Mags name="magResults"   @selectedtags="importMags"gt; lt;/Magsgt;  lt;q-btn label="Submit" type="submit" /gt;  lt;/formgt; lt;/templategt; lt;scriptgt; 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),    };  }, }; lt;/scriptgt;

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt;

Ответ №1:

Есть несколько проблем с вашим фрагментом кода.

 lt;form @submit.prevent="handleSubmit"gt;

Из этой строки мы ожидаем вызова handleSubmit() функции, но в setup() функции на нее нет ссылки. Вы его определили, но вам также нужно его вернуть.

Далее, когда вы должны объявить nowMags в начале функции setup (), например:

 const nowMags = ref(null)

И теперь, чтобы прочитать или установить значение nowMags в любой функции, вы должны вызвать ее как nowMags.value = x или x = nowMags.value или console.log(nowMags.value) .

Вот фрагмент кода, который должен помочь вам собрать все воедино.

 setup() {  // Define data variables here  const nowMags = ref(null)  const selectedMags = ref(null)    // Define functions here  const handleSubmit = () =gt; {  console.log(nowMags.value)  }  const importMags(selectedMags) {  nowMags.value = selectedMags  return nowMags.value  }    return {  nowMags,  selectedMags,  importMags,  handleSubmit  }  };

1. Это было действительно полезно, чтобы изложить мне основы. Спасибо! Я работаю над изучением API композиции. Это сработало для меня, хотя я оставил функции в форме функция [имя] (). Мне нужно будет изучить структуру .value, так как я никогда не видел этого раньше

Ответ №2:

Вы объявили nowMags внутри importMags() функции. Если вы хотите, чтобы он был виден за пределами функции, вам нужно переместить объявление туда.

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