Question

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

这是我目前的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 for示例使用双向绑定？

Answer 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: 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

使用VueJS和Laravel申请折扣

1 个答案: