Question

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

我不知道如何获得未来的值表格输入。

当我只有一个表单输入时，我使用＆＃39; v-model＆＃39; 来捕获已存在的输入字段的值。

但是在循环中有一个组件的多个实例，我无法弄明白。

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

动态输入字段数

1 个答案: