使用 VueJS 和 Laravel 应用折扣答案

【问题标题】：Apply a discount using VueJS and Laravel使用 VueJS 和 Laravel 应用折扣
【发布时间】：2016-04-15 16:45:13
【问题描述】：

我还没有走上创建自定义组件的道路，我已经检查了优惠券代码，现在我需要知道如何设置成本然后应用折扣。

这是我目前拥有的 JS

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.';

            })
            .error(function() {
                this.coupon.code = '';
                this.coupon.description = 'Sorry, that coupon does not exist.';
            });
    }
}
});

请任何人根据上述建议如何实现这一点:) 大概我需要将 Laravel 的值传递给 JS，我将如何实现这一点，然后应用折扣，我会为 v-model 提供服务吗？使用双向绑定的示例？

【问题讨论】：

你有什么错误吗？我想我不太明白你的问题。而且，在 get 调用之后，结果在 response.data 而不仅仅是 response
没有错误@YerkoPalma 只是不确定如何将折扣应用于屏幕上的价格，
那么您还应该指定/coupons/:code 操作返回的数据格式。需要注意的一些事项：1）您返回的任何内容都在coupon.data 中，而不是直接在coupon 中。 2）确保您使用v-resource 插件和Vue.use() 3）还确保您的路由正常，并且服务器没有指定任何扩展名，例如.json
@YerkoPalma 一切都按预期返回，但我不确定如何首先设置从 Laravel 到 JS 的“成本”。然后将优惠券号码从成本中扣除，然后显示在屏幕上。

标签： javascript laravel laravel-5.1 vue.js

【解决方案1】：

为什么不将价格回显到 javascript 对象中？

(function(globals){
   globals.price = {{ $somePrice }};
})(window.globals || (window.globals ={}));

然后与您的 vuejs 组件共享状态，

new Vue({
   data:{
      coupon: {
        code: '',
        description: '',
        discount: 0
      },
      valid: false,
      price: window.globals.price
   }
});

您可以根据您的选择通过多个事件触发验证；比如说你想在用户停止输入时触发 ajax 请求

那你可以去<input v-model="coupon.code" type="text" @keyup="validate() | debounce 1000">

上面的代码会在最后一次 keyup 后一秒调用方法 validate

现在是验证功能

...
    validate: function() {
        // assign this to another variable to make it accessible in the promise scope
        var _this = this;
        this.$http.get('/coupons/' + this.coupon.code).then(function(response) {
             // you can just pass a negative response  (false or null)from laravel
             if (response) {
                  _this.coupon = response;

             }

        });

    }

最后你可以使用 vuejs 的计算属性来更新折扣金额的显示。

computed: {
    discounted: function() {
        return this.price - this.coupon.discount;
    }
}

在视图中

<span>{{ discounted }}</span>

您仍然应该将优惠券传递给后端，并在用户购买或执行任何操作时从那里重新计算折扣价。

来源： http://vuejs.org/guide/events.html http://vuejs.org/guide/computed.html

【讨论】：