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

Question

So let's start with my code:

<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>

So that is basically the code. It outputs a single textbox and what I wanted to do is whenever I click on the Add button, it will automatically generate that whole html (from <div class="row"> to </div>).

So I researched and tried this:

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

It adds a textbox but I have problems here:

First is that it only creates a new textbox but I need it to create the whole row div.

Second is that I want each textbox to have a unique v-model. For example the first one is v-model="full_name" and when I add a new one, it should be like this:

<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>

Is there a way to do this? Thank you in advance.

Yaron Yosef · Accepted Answer · 2017-02-09 01:00:50Z

2

It's not the right way to do it in vue.js.

for dynamic rows, i would have loop through an array like this:

<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: ""});
}

answered Feb 9, 2017 at 1:00

Yaron Yosef

4474 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tjfo · Accepted Answer · 2017-02-09 01:50:47Z

This will allow a unique v-model for each input. It creates an array of inputs, so you can add as many as you want. The addRow function dynamically adds them and the v-if on the button removes the button when all of the inputs have been displayed. You'll have to make it pretty though!

<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>

And the 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++;
    }
  }
});

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related