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

Question

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

SCRIPT DATA
data() {
return {
form: {
jumlahlow: 1,
checked: [],
low: []
} 
}

我曾尝试将模型更改为low[n]或将数据中的low声明为对象｛｝，但根据我遇到的TypeErrors，这两者似乎都没有定义。

我该如何得到low[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>

Answer 1

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

下面是我的意思的一个例子：

new Vue({
el: '#app',

data: {
maxCount: 5,
count: 3,
items: [],
data: '',
},

computed: {
visibleItems() {
return this.items.slice(0, this.count)
}
},

created() {
// Define the data upfront so it will be reactive
for (let i = 0; i < this.maxCount; i++) {
this.items.push({
firstName: '',
lastName: '',
})
}
},

methods: {
submit() {
// Transform the data into some JSON that is
// compatible with your API
const data = this.visibleItems.map(item => ({
first_name: item.firstName,
last_name: item.lastName,
role: 'user',
}))

this.data = JSON.stringify(data, null, '  ')
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
Number of people:
<select v-model="count">
<option v-for="i of maxCount" :value="i">{{ i }}</option>
</select>
</div>

<div v-for="item of visibleItems">
<input placeholder="First name" v-model="item.firstName">
<input placeholder="Last name" v-model="item.lastName">
</div>

<button @click="submit">Submit</button>

<pre>{{ data }}</pre>
</div>

Answer 2

试试这个例子。

<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>

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

直接在此处查看：https://jsfiddle.net/abinhho/m3c8r4tj/2/

Answer 3

您正在迭代v-for="n in parseInt(form.jumlahlow)"，但这是一个Object，v-for在数组上工作，而不是在对象上。

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

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

之后，您必须写入v-for="n in form"，然后尝试通过form.low访问low