Laravel Setting form value="old('input')" with Vue JS 2

Question

I have a simple form with a calculator for the amount being charger including shipping and tax. If the form is submitted and comes back with errors, how do I display the old input into the value field of the form with Vue JS ? The instance values are coming back correct however they are not displayed in the form.

View

<div class="form-group">
    <label for="totalAmount">Total Amount</label>
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="totalAmount" class="form-control" id="totalAmount" name="totalAmount" value="{{old('totalAmount')}}" v-model="totalAmount" v-on:change="getTotal" placeholder="0.00" required>
    </div>
</div>
<div class="form-group">
    <label for="shipAmount">Shipping Amount</label>
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="shipAmount" class="form-control" id="shipAmount" name="shipAmount" value="{{ old('shipAmount') }}" v-model="shipAmount" v-on:change="getTotal" placeholder="0.00">
    </div>
</div>
<div class="form-group">
    <label for="taxRate">Tax Rate</label>
    <div class="input-group">
        <div class="input-group-addon">%</div>
        <input type="taxRate" class="form-control" id="taxRate" name="taxRate" value="{{ old('taxRate') }}" v-model="taxRate" v-on:change="getTotal" placeholder="0.00">
    </div>
</div>
<div class="widget-body text-center">
    <h4 class="m-b-md">Total Amount $ @{{ combinedAmount }}</h4>
</div>

JS File

    new Vue({
    el: '#app-content',
    data: {
        billSameAsShip: '',
        isHidden: 'true',
        totalAmount: '',
        shipAmount: '',
        taxRate: '',
        combinedAmount: ''
        },
    computed: {
        totalAmount2: function () {
            return this.totalAmount = {{ old('totalAmount') ?? 0 }};
        },
        shipAmount2: function () {
            return this.shipAmount = {{ ( old('shipAmount') ?? 0 ) }};
        },
        taxRate2: function () {
            return this.taxRate = {{ ( old('taxRate') ?? 0 ) }};
        }
    },
    beforeUpdate() {
        this.getTotal()
        this.totalAmount = this.totalAmount2;
    },
    methods: {
        onChange: function() {
            if(this.billSameAsShip == 'false'){ 
            this.isHidden = !this.isHidden;
            }
            else {
                this.isHidden = Boolean('true');
            }
        },
        checkNaN: function() {
            if(isNaN(parseFloat(this.totalAmount))){
                this.totalAmount = 0
            }
            if(isNaN(parseFloat(this.shipAmount))){
                this.shipAmount = 0
            }
            if(isNaN(parseFloat(this.taxRate))){
                this.taxRate = 0
            }
        },
        getTotal: function() {
            this.checkNaN();
            this.combinedAmount = (parseFloat(this.totalAmount) + parseFloat(this.shipAmount)) * (1 + (parseFloat(this.taxRate /100)));
        }
    }
    })
</script>

httpoz · Accepted Answer · 2017-07-26 03:39:46Z

1

Because you are using v-model to bind your inputs to the model, you do not need to use Laravel's value="{{ old('input') }}". All you need to do here is remove the value attributes from your inputs and clear out your entire computed function. In your logic, once you have submitted the data, you will need to clear / reset the editable inputs.

new Vue({
  el: "#app-content",
  data: {
    billSameAsShip: "",
    isHidden: "true",
    totalAmount: "",
    shipAmount: "",
    taxRate: "",
    combinedAmount: ""
  },
  beforeUpdate() {
    this.getTotal()
    this.totalAmount = this.totalAmount2;
  },
  methods: {
    onChange: function() {
      if (this.billSameAsShip == "false") {
        this.isHidden = !this.isHidden;
      } else {
        this.isHidden = Boolean("true");
      }
    },
    checkNaN: function() {
      if (isNaN(parseFloat(this.totalAmount))) {
        this.totalAmount = 0;
      }
      if (isNaN(parseFloat(this.shipAmount))) {
        this.shipAmount = 0;
      }
      if (isNaN(parseFloat(this.taxRate))) {
        this.taxRate = 0;
      }
    },
    getTotal: function() {
      this.checkNaN();
      this.combinedAmount =
        (parseFloat(this.totalAmount) + parseFloat(this.shipAmount)) *
        (1 + parseFloat(this.taxRate / 100));
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app-content">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="form-group">
          <label for="totalAmount">Total Amount</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="totalAmount" class="form-control" id="totalAmount" name="totalAmount" v-model="totalAmount" v-on:change="getTotal" placeholder="0.00" required>
          </div>
        </div>
        <div class="form-group">
          <label for="shipAmount">Shipping Amount</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="shipAmount" class="form-control" id="shipAmount" name="shipAmount" v-model="shipAmount" v-on:change="getTotal" placeholder="0.00">
          </div>
        </div>
        <div class="form-group">
          <label for="taxRate">Tax Rate</label>
          <div class="input-group">
            <div class="input-group-addon">%</div>
            <input type="taxRate" class="form-control" id="taxRate" name="taxRate" v-model="taxRate" v-on:change="getTotal" placeholder="0.00">
          </div>
        </div>
        <div class="widget-body text-center">
          <h4 class="m-b-md">Total Amount $ {{ combinedAmount }}</h4>
        </div>
      </div>
    </div>
  </div>
</div>

edited Jul 26, 2017 at 3:39

answered Jul 26, 2017 at 3:29

httpoz

965 bronze badges

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

3 Comments

rbur0425 Over a year ago

I want the values to be remembered, so when on post back due to errors the fields are not zeroed out for the user. Currently, they are coming back all 0 like this image - imgur.com/a/No3ZR

rbur0425 Over a year ago

I try :value="totalAmount" and that still does not put the inputs to what is stored in the Vue instance.

httpoz Over a year ago

Could you show me your updated code as well, in the snippet above I am not sure how you are handling submits and responses thereafter.

Collectives™ on Stack Overflow

Laravel Setting form value="old('input')" with Vue JS 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related