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。

もう1つは、各テキストボックスにユニークな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++; 
    } 
    } 
});