javascript - 如何在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: ""});
}