javascript - 输入字段的动态数量

Question

我在分期付款组件中工作，根据用户选择的分期付款次数(从 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
  }
}

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

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>