我正在使用分期付款组件,我需要根据用户选择的分期付款次数(从 1 到 12)提供表单输入的动态列表。
我不知道如何获取 future 表单输入的值。
当我只有一个表单输入时,我使用 'v-model' 来捕获已存在的输入字段的值。
但是对于循环内组件的多个实例,我无法弄清楚。
// The User choose 6
// The value 6 (Number) goes to a property inside data() with v-model
data () {
return {
numberOfFields: 6
}
}
然后进行 v-for
<template v-for="n in numberOfFields">
<input type="text" v-model="????">
</template>
我不想创造所有可能性,例如:
data(){
return {
inputField1: '',
inputField2: '',
inputField3: '',
// up to inputField12
}
}
我想仅在输入存在时捕获输入字段的值,但不事先创建每个可能的选项。
最佳答案
您可以使用:
<template v-for="n in numberOfFields">
<input type="text" v-model="$data['inputField' + n]">
</template>
演示:
new Vue({
el: '#app',
data() {
return {
numberOfFields: 6,
inputField1: '11',
inputField2: '22',
inputField3: '33',
inputField4: '44',
inputField5: '55',
inputField6: '66',
// up to inputField12
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<template v-for="n in numberOfFields">
<input type="text" v-model="$data['inputField' + n]"> {{ $data['inputField' + n] }}<br>
</template>
</div>
但这很不寻常。通常,我们创建另一个对象并使用它(而不是 data
根)。
使用另一个对象(称为fields
)的示例:
new Vue({
el: '#app',
data() {
return {
numberOfFields: 6,
fields: {
inputField1: '11',
inputField2: '22',
inputField3: '33',
inputField4: '44',
inputField5: '55',
inputField6: '66',
// up to inputField12
}
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<b>Using numberOfFields:</b><br>
<template v-for="n in numberOfFields">
<input type="text" v-model="fields['inputField' + n]"> {{ fields['inputField' + n] }}
</template>
<br><hr><br>
<b>Using (val, key):</b><br>
<template v-for="(val, key) in fields">
<input type="text" v-model="fields[key]"> {{ fields[key] }}
</template>
</div>
关于javascript - 输入字段的动态数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49991471/