eriktobben
2 years ago
652
2
Vue

Calculate total sum with dynamic form fields

Posted 2 years ago by eriktobben

Hi!

I have a form for an order create page, where 1 line contains description, quantity and price. The user can click a button to generate a new line.

At the bottom of the page, I want to display the total order amount.

I am not able to bind to the generated lines and therefore can not calculate the order total.

Here is the code:

HTML

<div class="col-sm-7">
    <div class="form-group">
        <div class="col-md-12">
            <input name="line_description[]" type="text" class="form-control" placeholder="Description">
        </div>
    </div>
</div>

<div class="col-sm-2">
    <div class="form-group">
        <div class="col-md-12">
            <input name="line_qty[]" type="text" class="form-control" placeholder="Quantity" v-model="qty">
        </div>
    </div>
</div>

<div class="col-sm-3">
    <div class="form-group">
        <div class="col-md-12">
            <input name="line_price[]" type="text" class="form-control" placeholder="Price" v-model="price">
        </div>
    </div>
</div>

JS

<script type="text/javascript">
$(function() {
  $("#addMore").click(function(e) {
    e.preventDefault();
    $("#lines").append('<div class="col-sm-7"><div class="form-group"><div class="col-md-12"><input name="line_description[]" type="text" class="form-control" placeholder="Description"></div></div></div>');

    $("#lines").append('<div class="col-sm-2"><div class="form-group"><div class="col-md-12"><input name="line_qty[]" type="text" class="form-control" placeholder="Quantity" v-model="qty"></div></div></div>');

    $("#lines").append('<div class="col-sm-3"><div class="form-group"><div class="col-md-12"><input name="line_price[]" type="text" class="form-control" placeholder="Price" v-model="price"></div></div></div>');
  });
});
</script>

Vue

<script>
    new Vue({
      el: '#app',
      data: {
        qty: 0,
        price: 0
      }
    })
</script>

Does anyone have any idea on how to get this to work?

Please sign in or create an account to participate in this conversation.