Question

我想创建一个动态表单字段，使用vue js添加多个名称样本输出 - ＆gt; 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 - ＆gt; https://jsfiddle.net/0e3csn5y/2/

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

Answer 1

在当前的尝试中，很难将两个输入与同一个对象绑定起来，像这样使用来正确绑定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>

Answer 2

你遇到这个问题的原因是因为javascript的一些限制及其对反应性的影响。

我同意对理想解决方案的其他回应。但是，如果您想使用两个数组，这里还有一个选项。

重要部分：

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

然后删除对象中的值的使用，使用this.field1.push('')设置并使用field1[i]

https://jsfiddle.net/0e3csn5y/4/

HTML：

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

JS：

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

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

2 个答案: