vue.js - vue2.0如何实现购物车的加减?

问题描述

问 题

谢谢大家，问题已经解决了。正确的代码已经更新···
想要拿到v-model.number="lists.buy_num"这个的值，从而进行操作。新手哦，请不要给负分`

   <div id="cart-box">
        <article class="con-main">                    
                 <div class="co-lists" v-for="（lists,index） in cart_list">
                        <div class="cpn-num">                                   
                               <span @click="reduceCartNum(index)"></span>
                                <input type="text" class="goods_num" readonly v-model.number="lists.buy_num">
                                <span  class="num_none"  @click="addCartNum(index)"></span>                                                    
                           </div>
                   </div>
                  
          </article>
   </div>

<script type="text/javascript">
    var cartbox=new Vue({
         el:"#cart-box",
         data:{
               buy_num:'',
               cart_list: [ 
               ],
             },
             created:function(){
                    this.getGoods()
             },
             methods:{
                    getGoods:function(){
                         $.getJSON("{:url('/cart/getCart',)}", function(json){
                                if(json.code == 200){
                                     cartbox.cart_list=json.data.cart_list;
                                }else{

                                }
                            });    
                    },
                 addCartNum:function (index) {
                     var buy_nums=this.cart_list[index].buy_num
                     if(buy_nums>30){                             
                         return false;
                      }                      
                     this.cart_list[index].buy_num++;
                  },
                  reduceCartNum:function(index){
                       var buy_nums=this.cart_list[index].buy_num
                       if(buy_nums <= 1){                                                          
                           return false;
                          }
                    this.cart_list[index].buy_num--;
                  }
                                        
             }
        
        });
</script>

解决方案

大神教我改好了~~

这篇关于vue.js - vue2.0如何实现购物车的加减?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！