Javascript 使用VueJS和Laravel应用折扣

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

这是我目前拥有的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来使用双向绑定吗？

为什么不将价格回传到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请求

然后你可以去

上面的代码将在最后一次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属性更新折扣金额的显示

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

在我看来

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

{{折扣}

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

资料来源：

---

为什么不将价格回传到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请求

然后你可以去

上面的代码将在最后一次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属性更新折扣金额的显示

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

在我看来

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

{{折扣}

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

资料来源：

---

你有什么错误吗？我想我不太明白你的问题。而且，在get呼叫后，结果是

响应。数据

不仅仅是

响应

无错误@yerkoplma只是不确定如何将折扣应用到屏幕上的价格，然后您还应该指定

/coups/：code

操作返回的数据格式。需要注意的是：1）您返回的任何内容都在

优惠券中。数据

不直接在

优惠券

中。2） 确保您正在将

v-resource

插件与

Vue.use（）

3）一起使用，同时确保您的路由正常，并且服务器没有检查任何扩展名，如

.json

，以便instance@YerkoPalma一切都是预期的，但我不确定如何首先设置从Laravel到JS的“成本”。然后从成本中扣除优惠券号码，然后显示在屏幕上。你有什么错误吗？我想我不太明白你的问题。而且，在get呼叫后，结果是

响应。数据

不仅仅是

响应

无错误@yerkoplma只是不确定如何将折扣应用到屏幕上的价格，然后您还应该指定

/coups/：code

操作返回的数据格式。需要注意的是：1）您返回的任何内容都在

优惠券中。数据

不直接在

优惠券

中。2） 确保您正在将

v-resource

插件与

Vue.use（）

3）一起使用，同时确保您的路由正常，并且服务器没有检查任何扩展名，如

.json

，以便instance@YerkoPalma一切都是预期的，但我不确定如何首先设置从Laravel到JS的“成本”。然后从成本中折扣优惠券号码，然后显示在屏幕上。