如何使用vue js创建多个输入字段转发器？

Question

我想创建一个动态表单字段,使用vue js示例输出添加多个名称 - > https://prnt.sc/h6y0pf

这是我的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>

这是我的vuejs

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: '' });
    }
  }
});

我在这里创建了一个jsfiddle - > https://jsfiddle.net/0e3csn5y/2/

问题是每次添加新字段时都只能填充名字.我怎么能这样做姓氏领域？我们怎么能在这里做棘手的部分？

Answer 1

在当前的try中,很难将两个输入绑定到同一个对象,像这样使用绑定first-name和last-name正确.

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

.border {
  border: 1px solid black;
  padding: 3px;
  margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.js"></script>
<div id="app">
  <h1>Vue JS Multiple Fields Repeater</h1>
  <div class="border" v-for="field in fields">
    <input v-model="field.first" placeholder="Enter First Name">
    <input v-model="field.last" placeholder="Enter Last Name">
  </div>
  <button @click="AddField">
    New Field
  </button>
  <pre>{{ $data | json }}</pre>
</div>