Javascript 如何使用vue js创建多个输入字段repeater？

我想创建一个动态表单字段，以便使用vue js添加多个名称 样本输出->

这是我的html

<div id="app">
  <h1>Vue JS Multiple Fields Repeater</h1>
  <div class="border" v-for="field in field1">
    <input v-model="field.value" placeholder="Enter First Name">
    <input v-model="field2.value" placeholder="Enter Last Name">
  </div>
  <button @click="AddField">
    New Field
  </button>
  <pre>{{ $data | json }}</pre>
</div>

我在这里创建了一个JSFIDLE->

---

问题是每次我添加新字段时只能填充第一个名称。如何对姓氏字段也执行此操作？我们如何才能在这里完成棘手的部分？

在您当前的尝试中，将两个输入绑定到同一个对象是很困难的，这样可以正确地绑定

名字和
姓氏


newvue({
el:“#应用程序”，
数据：{
字段：[{第一个：''，最后一个：'}]，
},
已创建：函数（）{
},
方法：{
AddField:函数（）{
this.fields.push（{first:''，last:''}）；
}
}
});
.border{
边框：1px纯黑；
填充：3倍；
边缘底部：5px；
}

Vue JS多字段转发器
新领域
{{$data | json}
您对此产生问题的原因是javascript的一些限制及其对反应性的影响

关于理想解决方案，我同意另一种回答。但是，如果要使用两个数组，这里还有一个选项

重要部分包括：

v-for=“i in field1.length”
这将循环0到长度

然后删除对象中值的使用，使用
this.field1.push（“”）
设置，并使用
field1[i]


html:

您的第一个输入模型在
v-model=“field.value”
中缺少
1
，您没有
field
数据，但
field1
数据来自
field1
阵列非常感谢您，这就是我想要的。回答得好！也帮助我通过Vue了解了更多：）
new Vue({
  el: '#app',
  data: {
    field1: [] ,
    field2: [] 
  },
  created: function() {
      this.field1.push({ value: '' });
      this.field2.push({ value: '' });
  },
  methods: {
    AddField: function () {
      this.field1.push({ value: '' });
      this.field2.push({ value: '' });
    }
  }
});

<div id="app">
  <h1>Vue JS Multiple Fields Repeater</h1>
  <div class="border" v-for="i in field1.length">
    <input v-model="field1[i]" placeholder="Enter First Name">
    <input v-model="field2[i]" placeholder="Enter Last Name">
  </div>
  <button @click="AddField">
    New Field
  </button>
  <pre>{{ $data | json }}</pre>
</div>

new Vue({
  el: '#app',
  data: {
    field1: [] ,
    field2: [] 
  },
  created: function() {
      this.field1.push('');
      this.field2.push('');
  },
  methods: {
    AddField: function () {
      this.field1.push('');
      this.field2.push('');
    }
  }
});