输入字段的动态数量

Question

我正在使用分期付款组件，我需要一个动态的表单输入列表，根据用户选择的分期付款次数（从 1 到 12）。

我不知道如何获得未来 Form Inputs 的值。

当我只有一个表单输入时，我使用 '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
  }
}

我想仅在输入存在时捕获输入字段的值，而不是事先创建所有可能的选项。

Answer 1

你可以使用：

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