Vue.js 如果我只使用数字进行迭代，如何获得v-for组件的v-model值？

我在select的值（整数）上迭代了v-for表单组组件。我想得到迭代v模型的值，但我似乎无法得到正确的值

TEMPLATE
      <b-form-group
        id="input-group-1"
        label="Jumlah Lowongan:"
        label-for="selectJumlahLow"
        description="Silahkan pilih satu."
        v-if="show"
      >
        <b-form-select id="selectJumlahLow" v-model="form.jumlahlow" :options="selow" required></b-form-select>
      </b-form-group>

      <b-form-group label="Nama Lowongan:" v-for="n in parseInt(form.jumlahlow)" :key="n">
        <b-form-input required placeholder="Masukkan nama lowongan" v-model="low"></b-form-input>
      </b-form-group>

我尝试将模型更改为low[n]或将数据中的low声明为object{}，但根据我遇到的类型错误，这两种类型中的任何一种似乎都没有定义

我应该如何得到低[n]的值

编辑：

以下是完整的代码：

<template>
  <div>
    <b-form @submit="onSubmit" @reset="onReset">
      <b-form-group
        id="input-group-1"
        label="Jumlah Lowongan:"
        label-for="selectJumlahLow"
        description="Silahkan pilih satu."
        v-if="show"
      >
        <b-form-select id="selectJumlahLow" v-model="form.jumlahlow" :options="selow" required></b-form-select>
      </b-form-group>

      <b-form-group label="Nama Lowongan:" v-for="n in parseInt(form.jumlahlow)" :key="n">
        <b-form-input required placeholder="Masukkan nama lowongan" v-model="low"></b-form-input>
      </b-form-group>

      <b-button type="submit" variant="primary">
        {{ buttonText }}&nbsp;
        <i class="material-icons">arrow_forward_ios</i>
      </b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ form }}</pre>
    </b-card>
  </div>
</template>

<script>
export default {
  name: "lowonganForm",
  data() {
    return {
      form: {
        jumlahlow: 1,
        checked: [],
        low: []
      },
      selow: [
        { text: "Pilih Satu", value: null, disabled: true },
        1,
        2,
        3,
        4,
        5,
        6
      ],
      show: true,
      target: false,
      buttonText: "Next"
    };
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
      //   if (this.jumlahlow !== null || !this.jumlahlow < 1) {
      //     this.show = false;
      //   }
    },
    onReset(evt) {
      evt.preventDefault();
      // Reset our form values
      this.form.jumlahlow = null;
      this.form.checked = [];
      // Trick to reset/clear native browser form validation state
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    }
  },
  computed: {}
};
</script>

{{buttonext}}
前进箭头
重置
{{form}}
导出默认值{
名称：“lowonganForm”，
数据（）{
返回{
表格：{
朱姆拉洛：1，
已勾选：[]，
低：[]
},
赛洛：[
{text:“Pilih Satu”，值：null，禁用：true}，
1.
2.
3.
4.
5.
6.
],
秀：没错，
目标：错，
按钮文字：“下一步”
};
},
方法：{
onSubmit（evt）{
evt.preventDefault（）；
警报（JSON.stringify（this.form））；
//if（this.jumlahlow！==null | |！this.jumlahlow<1）{
//this.show=false；
//   }
},
ON复位（evt）{
evt.preventDefault（）；
//重置表单值
this.form.jumlahlow=null；
this.form.checked=[]；
//重置/清除本机浏览器表单验证状态的技巧
this.show=false；
这个.$nextTick（（）=>{
this.show=true；
});
}
},
计算：{}
};

您正在迭代

v-for=“n in parseInt（form.jumlahlow）”

但这是一个对象，并且

v-for

对数组而不是对象有效

在这里，您可以使用对象数组进行迭代，例如：-

form: [{
    jumlahlow: 1,
    checked: [],
    low: []
  }]

在这之后，您必须在表单中写入

v-for=“n”

，然后尝试通过

form访问
low
。low

试试这个例子

<div id="app">
  <div>
    <select v-model="jumlahlow">
      <option v-for="i in selects" :key="i">{{ i }}</option>
    </select>
  </div>
  <div v-for="num, index in parseInt(jumlahlow)">
    <input v-model="lows[index].value" />
  </div>
</div>

{{i}

和JS

new Vue({
  el: '#app',
  data: {
      lows: [
        {
        value: ''
      }
    ],
    jumlahlow: 1,
    selects: [
            1,
        2,
        3,
        4,
        5,
        6
    ]
  },
  watch: {
    jumlahlow: function (val) {
        this.lowsTmp = this.lows;
        this.lows = [];
        for (let i = 0; i < val; i++) {
        const currentVal = typeof this.lowsTmp[i] !== 'undefined' ? this.lowsTmp[i].value : '';
        this.addLow(currentVal);
      }
    }
  },
  methods: {
    addLow: function(val) {
        this.lows.push({ value: val });
    }
  }
})

newvue({
el:“#应用程序”，
数据：{
低点：[
{
值：“”
}
],
朱姆拉洛：1，
选择：[
1.
2.
3.
4.
5.
6.
]
},
观察：{
jumlahlow：功能（val）{
this.lowsTmp=this.lows；
this.lows=[]；
for（设i=0；i

---

直接勾选此处：

您应该尝试为数据建模，以确定视图的呈现方式。如果希望有一个输入框列表，那么这些输入的数据应该在预先填充了这些项的数组中定义，或者当需要调整项的数量时，应该将这些数据项添加到数组中。这样也可以避免反应性问题

这里有一个例子来说明我的意思：

newvue({
el:“#应用程序”，
数据：{
最大计数：5，
计数：3，
项目：[]，
数据：“”，
},
计算：{
visibleItems（）{
返回this.items.slice（0，this.count）
}
},
创建（）{
//预先定义数据，使其成为被动的
for（设i=0；i({
名字：item.firstName，
姓氏：item.lastName，
角色：'用户'，
}))
this.data=JSON.stringify（数据，null，“”）
}
}
})

人数：
{{i}
提交
{{data}}

nope，返回无效的数组长度错误。我的解释似乎有点错误，我想做的是根据select的值迭代表单组X次，该值可以是其中之一，两个或三个，然后访问迭代表单组的输入的v-model值，以便axios发布它们。在此处发布您的代码或显示一些代码快照，以便我可以看到错误来自何处。请您在JSFIDLE中重新生成它，好吗？这看起来像是XY问题。我认为你从一开始就做得不对。也许，我需要发送职位空缺电子邮件，最小值是1，最大值是6个职位空缺（家长），每个空缺中有1-15个职位描述（孩子），以及1-15个要求（孩子，兄弟）。您建议我如何在vue中执行此操作？实际上是询问，而不是讽刺编辑：电子邮件发送部分将是后端的问题，我只需要发送这些数据。

new Vue({
  el: '#app',
  data: {
      lows: [
        {
        value: ''
      }
    ],
    jumlahlow: 1,
    selects: [
            1,
        2,
        3,
        4,
        5,
        6
    ]
  },
  watch: {
    jumlahlow: function (val) {
        this.lowsTmp = this.lows;
        this.lows = [];
        for (let i = 0; i < val; i++) {
        const currentVal = typeof this.lowsTmp[i] !== 'undefined' ? this.lowsTmp[i].value : '';
        this.addLow(currentVal);
      }
    }
  },
  methods: {
    addLow: function(val) {
        this.lows.push({ value: val });
    }
  }
})