mardi 25 juillet 2017

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

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.

<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="" 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="" 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="" 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 $ @</h4>
                        </div>

JS File:

    new Vue({
    el: '#app-content',
    data: {
        billSameAsShip: '',
        isHidden: 'true',
        totalAmount: '',
        shipAmount: '',
        taxRate: '',
        combinedAmount: ''
        },
    computed: {
        totalAmount2: function () {
            return this.totalAmount = ;
        },
        shipAmount2: function () {
            return this.shipAmount = ;
        },
        taxRate2: function () {
            return this.taxRate = ;
        }
    },
    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>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire