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

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>

这基本上就是代码。它输出一个文本框，我想做的是每当我单击添加按钮时，它都会自动生成整个 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: ""});
}