我在使用組件 Mags 發出的 vue 3 應用程式中的變數時遇到問題。該變數在 importMags 函式中作業，但我無法通過 handleSubmit 函式讀取/使用它。它始終為空。
<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>uj5u.com熱心網友回復：
您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),
};
},
uj5u.com熱心網友回復：
您的代碼片段存在一些問題。
<form @submit.prevent="handleSubmit">從這一行開始，我們期望呼叫該handleSubmit()函式，但該函式并未參考它setup()。您已經定義了它，但您還需要回傳它。
接下來，當您應該在 setup() 函式的開頭宣告 nowMags 時，如下所示：
const nowMags = ref(null)現在為了在任何函式中讀取或設定 nowMags 值，您必須像nowMags.value = xor x = nowMags.valueor一樣呼叫它console.log(nowMags.value)。
這是一個代碼片段，可以幫助您將事情拼湊起來。
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
}
};轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/353795.html
標籤：javascript Vue.js
上一篇：如何迭代具有固定總和的陣列集
下一篇：在左上角對齊文本