如何访问 Vue 3 中动态生成的输入字段的输入值?
How can I access the input values of dynamically generated input fields in Vue 3?
我正在 vue 3 中创建一个表单,其中一些 select 字段是根据另一个输入字段的输入值使用 v-for 动态生成的。
所以我不知道如何访问每个 select 字段的值,因为它们是动态生成的并且都具有相同的值。
请问我现在如何为它们提供唯一的 v-model 值,以便我可以单独访问它们中的每一个并在我的脚本数据中使用。
我尝试将每个 select 字段的 v-model 值与其元素索引连接起来,使每个字段都是唯一的,但在尝试在 v-model 值中执行该操作时,我一直遇到错误。
用于输入以下科目数量的输入字段
<n-form-item class="input-field-div" label="Number of subjects passed">
<n-input-number v-model:value="nSubs" placeholder="Number passed" />
</n-form-item>
Div 元素根据上面的输入字段动态生成 select 字段
<div
v-for="(i, index) in nSubs"
:key="index"
class="itemSelect"
style="display: flex; width: 100%"
>
<n-select
style="width: 65%; margin: 0 2% 2% 0"
v-model:value="value"
:options="subjects"
/>
<n-select style="width: 35%" v-model:value="value" :options="grades" />
</div>
我的带有选项值的脚本代码
<script>
import StepsBar from "../components/StepsBar.vue";
export default {
data() {
return {
selectedValue: "",
selectedValues: "",
value: null,
selectedOption: null,
nSubs: 0,
isActive: false,
subjects: [
{ label: "Biology (510)", value: "1" },
{ label: "Chemistry (515)", value: "2" },
{ label: "Economics (525)", value: "3" },
{ label: "English Language (530)", value: "4" },
{ label: "French (545)", value: "5" },
{ label: "Geography (550)", value: "6" },
{ label: "Human Biology (565)", value: "7" },
{ label: "Mathematics (570)", value: "8" },
{ label: "Physics (580)", value: "8" },
{ label: "Computer Science (595)", value: "9" },
],
grades: [
{ label: "A", value: "1" },
{ label: "B", value: "2" },
{ label: "C", value: "3" },
{ label: "D", value: "4" },
{ label: "E", value: "5" },
{ label: "F", value: "6" },
{ label: "O", value: "7" },
],
};
},
methods: {
},
components: {
StepsBar,
},
};
</script>
我认为最简单的方法是为您的输入字段也创建一个数据结构。
当您想存储值列表时,可以使用数组 []
。
<div
v-for="(i, index) in nSubs"
:key="index"
class="itemSelect"
style="display: flex; width: 100%"
>
<n-select
style="width: 65%; margin: 0 2% 2% 0"
v-model="data[index]"
:options="subjects"
/>
<n-select style="width: 35%" v-model:value="value" :options="grades" />
</div>
然后初始化数据字段来存储值。
export default {
data() {
return {
...
data: []
...
还有您在此处使用的语法:v-model:value="value"
我不知道这是否有效
我正在 vue 3 中创建一个表单,其中一些 select 字段是根据另一个输入字段的输入值使用 v-for 动态生成的。
所以我不知道如何访问每个 select 字段的值,因为它们是动态生成的并且都具有相同的值。
请问我现在如何为它们提供唯一的 v-model 值,以便我可以单独访问它们中的每一个并在我的脚本数据中使用。
我尝试将每个 select 字段的 v-model 值与其元素索引连接起来,使每个字段都是唯一的,但在尝试在 v-model 值中执行该操作时,我一直遇到错误。
用于输入以下科目数量的输入字段
<n-form-item class="input-field-div" label="Number of subjects passed">
<n-input-number v-model:value="nSubs" placeholder="Number passed" />
</n-form-item>
Div 元素根据上面的输入字段动态生成 select 字段
<div
v-for="(i, index) in nSubs"
:key="index"
class="itemSelect"
style="display: flex; width: 100%"
>
<n-select
style="width: 65%; margin: 0 2% 2% 0"
v-model:value="value"
:options="subjects"
/>
<n-select style="width: 35%" v-model:value="value" :options="grades" />
</div>
我的带有选项值的脚本代码
<script>
import StepsBar from "../components/StepsBar.vue";
export default {
data() {
return {
selectedValue: "",
selectedValues: "",
value: null,
selectedOption: null,
nSubs: 0,
isActive: false,
subjects: [
{ label: "Biology (510)", value: "1" },
{ label: "Chemistry (515)", value: "2" },
{ label: "Economics (525)", value: "3" },
{ label: "English Language (530)", value: "4" },
{ label: "French (545)", value: "5" },
{ label: "Geography (550)", value: "6" },
{ label: "Human Biology (565)", value: "7" },
{ label: "Mathematics (570)", value: "8" },
{ label: "Physics (580)", value: "8" },
{ label: "Computer Science (595)", value: "9" },
],
grades: [
{ label: "A", value: "1" },
{ label: "B", value: "2" },
{ label: "C", value: "3" },
{ label: "D", value: "4" },
{ label: "E", value: "5" },
{ label: "F", value: "6" },
{ label: "O", value: "7" },
],
};
},
methods: {
},
components: {
StepsBar,
},
};
</script>
我认为最简单的方法是为您的输入字段也创建一个数据结构。
当您想存储值列表时,可以使用数组 []
。
<div
v-for="(i, index) in nSubs"
:key="index"
class="itemSelect"
style="display: flex; width: 100%"
>
<n-select
style="width: 65%; margin: 0 2% 2% 0"
v-model="data[index]"
:options="subjects"
/>
<n-select style="width: 35%" v-model:value="value" :options="grades" />
</div>
然后初始化数据字段来存储值。
export default {
data() {
return {
...
data: []
...
还有您在此处使用的语法:v-model:value="value"
我不知道这是否有效