如何在vuejs中动态添加文本框并设置唯一的v-model？

Question

那么让我们从我的代码开始：

<button v-on:click="addTextbox">Add</button>

<div id="container">
<div class="row">
    <div class="input-field col s12 m12 l12">
        <input id="full_name" type="text" v-model="full_name">
    </div>
</div>
</div>

代码基本上就是这样。它输出一个文本框，我想做的是每当我点击 Add 按钮时，它会自动生成整个 html（从 <div class="row"> 到 </div>).

所以我研究并尝试了这个：

addTextbox: function() {
   var container = document.getElementById("container");
   var input = document.createElement("input");
   input.type = "text";
   container.appendChild(input);
}

它添加了一个文本框，但我在这里遇到问题：

首先是它只创建一个新的文本框，但我需要它来创建整行 div。

其次，我希望每个文本框都有一个唯一的 v-model。例如第一个是v-model="full_name"，当我添加一个新的时，它应该是这样的：

<div id="container">
<div class="row">
    <div class="input-field col s12 m12 l12">
        <input id="full_name" type="text" v-model="full_name">
    </div>
</div>

<div class="row">
    <div class="input-field col s12 m12 l12">
        <input id="full_name2" type="text" v-model="full_name2">
    </div>
</div>
</div>

有办法吗？提前谢谢你。

Answer 1

在 vue.js 中这不是正确的方法。

对于动态行，我会像这样循环遍历数组：

<button v-on:click="addRow">Add</button>

<div id="container">

  <div class="row" v-for="row in rows">
    <div class="input-field col s12 m12 l12">
      <input type="text" value="{{row.full_name}}">
    </div>
  </div>

</div>

rows = [{full_name: "john doe"}, {full_name: "jane doe"}]

addRow: function() {
  this.rows.push({full_name: ""});
}

Answer 2

这将允许每个输入具有唯一的 v-model。它创建了一个输入数组，因此您可以添加任意数量的输入。 addRow 函数动态添加它们，按钮上的 v-if 在显示所有输入后删除按钮。不过你得把它弄得漂亮点！

<div id="app">
  <button v-if="currentInputIndex < inputs.length" v-on:click="addRow">Add</button>

  <div id="container">

    <div class="row" v-for="row in rows">
      <div class="input-field col s12 m12 l12">
        <input type="text" :name="row.inputname" v-model="row.inputvalue">
      </div>
    </div>

  </div>

</div>

和 js:

var vm = new Vue({
  el: "#app",
  data: {
    currentInputIndex: 0,
    inputs: [ 'fullname', 'email'],
    rows: []
  }, 
  methods: {
    addRow: function() {
      this.rows.push({inputname: this.inputs[this.currentInputIndex], inputvalue: ""});
      this.currentInputIndex++;
    }
  }
});

如何在vuejs中动态添加文本框并设置唯一的v-model？

How to dynamically add a textbox and set a unique v-model in vuejs?

html

javascript

jquery

vuejs2