Quick-Bill

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<link rel="stylesheet" href="https://donateblood.scalingo.io/assets/css/demo.css">
<link rel="stylesheet" href="https://donateblood.scalingo.io/assets/css/bootstrap.min.css">
<div id="quick-bill-wrapper">
  <ol>
    <!-- Now we provide each todo-item with the todo object    -->
    <!-- it's representing, so that its content can be dynamic -->
    <quick-bill v-bind:qb="QuickBill"></quick-bill>
  </ol>
</div>


<div id="quick-bill-wrapper-ext">
  <ol>
    <!-- Now we provide each todo-item with the todo object    -->
    <!-- it's representing, so that its content can be dynamic -->
    <quick-bill-ext v-bind:qb="QuickBill"></quick-bill-ext>
  </ol>
</div>

JavaScript

var QBConstructor = Vue.extend({
  props: ['qb'],
  template: '\
  <div id="sidebar-wrapper" style="background-color:white">\
  <img src="https://donateblood.scalingo.io/assets/images/buttons-top.png">\
    <div class="col-md-12">\
    <div class="content" style="padding: 25px;">\
      <form method="get" action="/" class="form-horizontal">\
        <fieldset>\
          <legend>Quick Bill</legend>\
          <div class="form-group">\
            <label class="col-sm-2 control-label">ID</label>\
            <div class="col-sm-10">\
              <p class="form-control-static">{{qb.InvoiceId}}</p>\
            </div>\
          </div>\
          <div class="form-group"> \
            <label class="col-sm-2 control-label">Mark + / -</label>\
            <div class="col-sm-10">\
              <input type="number" v-model="qb.Mark" @keyup="calculateQuickBill(qb)" class="form-control">\
            </div>\
          </div>\
        </fieldset>\
        <fieldset>\
          <div class="form-group">\
          <label class="col-sm-2 control-label">Final Bill Total</label>\
            <div class="col-sm-4">\
              <div class="input-group">\
                <span class="input-group-addon">$</span>\
                <input type="number" class="form-control"  @keyup="calculateQuickBill(qb)"   v-model="qb.Amount"  disabled="true" >\
                <span class="input-group-addon"></span>\
              </div>\
            </div>\
          </div>\
          <div class="form-group">\
            <label class="col-sm-2 control-label">Final Bill At</label>\
            <div class="col-sm-4">\
              <div class="input-group">\
                <span class="input-group-addon">$</span>\
                <input  type="number" class="form-control" v-model="qb.AmountBilled"  @keyup="calculateQuickBill(qb)">\
                <span class="input-group-addon"></span>\
              </div>\
            </div>\
          </div>\
        </fieldset>\
        <fieldset>\
      ...