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>）。< / p>

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

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模型。它会创建一个输入数组，因此您可以根据需要添加任意数量的输入。 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？

2 个答案: