如何访问 Vue 3 中动态生成的输入字段的输入值？

Question

我正在 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>

Answer 1

我认为最简单的方法是为您的输入字段也创建一个数据结构。

当您想存储值列表时，可以使用数组 []。

<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 中动态生成的输入字段的输入值？

How can I access the input values of dynamically generated input fields in Vue 3?

vue.js

vuejs3

v-for

input-field

v-model