multi input bootstrap vuejs

index.html

<div class="container" id="app">
  <form>
    <div
         class="row justify-content-center"
         v-for="(attendee, index) in attendees"
         :key="index"
         >
      <div class="col-sm-3">
        <div class="form-group">
          <label class="sr-only">Name</label>
          <input
                 class="form-control"
                 aria-describedby="emailHelp"
                 placeholder="Enter name"
                 v-model="attendee.name"
                 name="attendees[][name]"
                 required
                 >
        </div>
      </div>
      <div class="col-sm-3">
        <div class="form-group">
          <label class="sr-only">Email address</label>
          <input
                 type="email"
                 class="form-control"
                 placeholder="Enter email"
                 v-model="attendee.email"
                 name="attendees[][email]"
                 required
                 >
        </div>
      </div>
      <div class="col-sm-2 text-left">
        <button
                type="button"
                class="btn btn-light"
                @click.prevent="removeAttendee(index)"
                v-show="quantity > 1"
                >
          <span aria-hidden="true">×</span>
          Remove
        </button>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-sm-6"></div>
      <div class="col-sm-2">
        <button
                type="button"
                class="btn btn-secondary"
                @click.prevent="addAttendee"
                >
          Add Attendee
        </button>
      </div>
    </div>
    <hr>
    <div class="row justify-content-center">
      <div class="col-sm-6">
        <span class="unit-price">${{ cost }} ea.</span>
      </div>
      <div class="col-sm-2 text-left">
        <button
                type="submit"
                class="btn btn-primary"
                >
          Pay ${{ checkoutTotal }}
        </button>
      </div>
    </div>
    <form>
      </div>

multi-input-bootstrap-vuejs.markdown

multi input bootstrap vuejs

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

(function () {
  var app = new Vue({
    el: '#app',
    data: {
      attendees: [{ name: '', email: '' }],
      cost: 9.99,
    },
    computed: {
      quantity: function () {
        return this.attendees.length;
      },
      checkoutTotal: function () {
        return this.cost * this.quantity;
      }
    },
    methods: {
      addAttendee: function (event) {
        event.preventDefault();
        this.attendees.push({
          name: '',
          email: '',
        });
      },
      removeAttendee: function (index) {
        this.attendees.splice(index, 1);
      }
    }
  });
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

style.css

body {
  margin: 3em
}

button {
  cursor: pointer;
}

.unit-price {
  margin-right: 2rem;
  color: #999;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />