for循环中的Vue动态表单元素

Question

在 vue 组件中，我想在 for 循环中生成动态输入元素并将它们绑定到 data.form 元素。

data() {
    return {
        form: {}
    }
}

<b-form-checkbox v-model="form[key]['amount']" type="checkbox" :value="key"></b-form-checkbox>

我该如何处理，我试过的方法：

form.amount[key] // is working, but not really the best data structure, and the array is populated with null values for each for loop entry on init ...
form[key]['amount'] // not working

// the working example I mentioned is structured this way
form: {
  amount: [],
}

也许有人可以帮我解决这个问题...

Answer 1

只需为表单字段定义一个空数组，例如return { formFields: [] }。然后在此数组中添加与要在屏幕上呈现的输入字段一样多的值：

<template>
  <form>
    <input v-for="(field,index) in formFields" :key="index" v-model="fields[index]" type="text">
  </form>
</template>

<script>
export default
{
  data()
  {
    return {
      formFields: []
    };
  },
  mounted()
  {
    for (let i = 1; i <= 10; i++) this.formFields.push('');
  }
}
</script>

如果您需要不同类型的输入字段 - 您将需要使用对象数组而不是字符串，并将字段类型编码为每个对象中的属性。

for循环中的Vue动态表单元素

Vue dynamic form elements in for loop

vue.js

vue-component

vuejs2