Pass PHP to Vue

Depends... sometimes I make an AJAX cal from Vue back to PHP; sometimes, if appropriate, I will inline a small JSON string as an data- attribute; and sometimes for very large JSON, I will assign it inside tags at the end of my HTML (which I really hate to do!!!)

@tykus_ikus well basically using vue I have a coupon input which will allows users to enter a coupon code to get money off.

Then I need to set the total price with the discounted value upon a valid coupon code been entered.

The JS i have is:

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');


new Vue({
    el: '#coupons',

    data: function() {
        return {
            coupon: {
                code: '',
                description: '',
                discount: 0
            },
            valid: false
        };
    },


    methods: {
        validate: function() {
            
            this.$http.get('/coupons/' + this.coupon.code)
                .success(function(coupon) {
                    this.coupon = coupon;
                    this.valid = true;
                    this.coupon.description = 'Great! You entered a valid coupon.';
                    console.log(total);
                })
                .error(function() {
                    this.coupon.code = '';
                    this.coupon.description = 'Sorry, that coupon does not exist.';
                });
        }
    }
});

Which all works fine, but if you look at this quick video I made - https://www.dropbox.com/s/xh5gzbzwefmi7xf/discount.mov?dl=0 You'll see if works so upon success I want to then set the total price on screen so the user can see that a discount has been applied.

The HTML looks like

<tfoot id="coupons">
                                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>SubTotal:&pound;24.00<br />
                            <strong>Delivery &pound;3.99<br />
                                                            <span v-model="total">Total &pound;27.99</span> (incl delivery)</strong>
                        </td>
                    </tr>
                
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><input type="text"
                                   name="coupon"
                                   id="coupon"
                                   class="form-control"
                                   v-model="coupon.code"
                                   v-on="blur: validate"
                                   v-attr="disabled: valid"
                                   placeholder="Have a coupon code?"
                            >

                            <p class="pink accent-1 label-primary" v-show="coupon.description" v-text="coupon.description"></p>
                            {{ $data | json }}
                        </td>
                    </tr>

You don't have a total bound to the data object?

data: function() {
    return {
        coupon: {
            code: '',
            description: '',
            discount: 0
        },
        valid: false,
        total: 0 // added this
    };
},

Upon successful coupon, you could simply update the total by decreasing the total by the discount amount - right?

.success(function(coupon) {
    this.coupon = coupon;
    this.valid = true;
    this.coupon.description = 'Great! You entered a valid coupon.';

   this.total = this.total - this.coupon.discount; // this simply updates the total value 
})

Ok, so on screen I see

SubTotal:£24.00
Delivery £3.99
Total £27.99 (incl delivery) 

How do I get the 27.99 is this example to be less the coupon code value in this example 10

@JoeDawson any idea?

Anyone else willing to chip in and advise?

Figured it out, after having a complete break from it and thinking about it.

I did the following.

Added this to my controller:

// Basically get the cart total and check if the amount is less then 75 then add the delivery charge otherwise continue.

public function getCartTotal() {
        
        if (Cart::total() < 75) {
            $cartTotal = Cart::total() + Config::get('moltincart.postage');
            return response()->json($cartTotal);
        }
        else {
            $cartTotal = Cart::total() + Config::get('moltincart.postage');
            return response()->json($cartTotal);
        }
    }

Added new route Route::any('cartTotal', 'CartController@getCartTotal');

Then added the following to my JS

// The methods
getTotal: function() {
            this.$http.get('/cartTotal', function(total) {
                this.$set('total', total);
            });
        },

// Then added a ready method 
ready: function() {
        this.getTotal();
    },

// Then added this to my html
<span v-model="total">Total @{{ total | currency £ }}</span></strong>

And surprise surprise, VueJS has done it again totally amazed how powerful it really is and the more I'm using it the more I understand how it works.

One problem I now have is passing the total once a coupon is valid and changed the total to pass it to another page. @JoeDawson

Anyone know on the last post?