在已经购买的展示窗口,点击+号和-号没反应

来源:17-24 购物车详情页实现(4)

littlefire

2018-08-22

老师,您好,我在shopcart.vue里面已经定义list-content模块。代码如下:

<div class="list-content" ref="listContent">

          <ul>

            <li class="food" v-for="food in selectFoods" :key="food.id">

              <span class="name">{{food.name}}</span>

              <div class="price">

                <span>¥{{food.price*food.count}}</span>

              </div>

              <div class="cartcontrol-wrapper">

                <cartcontrol @add="addFood" :food="food"></cartcontrol>

              </div>

            </li>

          </ul>

        </div>

并且定义了函数:

addFood (target) {

      console.log('addFood')

      this.drop(target)

    },

发现点击+号和-号没反应。addFood (target)没有被调用执行也没有动画出来。

我在goods.vue中,+号和-号代码如下:

<div class="foods-wrapper" ref="foodsWrapper">

        <ul>

          <li v-for="item in goods" :key="item.id" class="food-list" ref="foodList">

            <h1 class="title">{{item.name}}</h1>

            <ul>

              <li @click="selectFood(food,$event)" v-for="food in item.foods" :key="food.id" class="food-item border-1px">

                <div class="icon">

                  <img width="57" height="57" :src="food.icon">

                </div>

                <div class="content">

                  <h2 class="name">{{food.name}}</h2>

                  <p class="desc">{{food.description}}</p>

                  <div class="extra">

                    <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>

                  </div>

                  <div class="price">

                    <span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>

                  </div>

                  <div class="cartcontrol-wrapper">

                    <cartcontrol @add="addFood" :food="food"></cartcontrol>

                  </div>

                </div>

              </li>

            </ul>

          </li>

        </ul>

      </div>

      <shopcart ref="shopcart" :selectFoods="selectFoods" :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopcart>

在这里面调用addFood是可以正常执行的。

addFood (target) {

      console.log('addFoodtest')

      this._drop(target)

    },

帮忙帮忙,谢谢老师。

写回答

1回答

ustbhuangyi

2018-08-22

建议先对比我的源码,很快有新的课程会出来~
https://github.com/ustbhuangyi/vue-sell

0
1
littlefire
已经对比了源码,代码是跟源码一样的。我在cartcontrol.vue做了测试: methods: { addCart (event) { console.log('1') if (!event._constructed) { return } console.log(this.food.count) if (!this.food.count) { Vue.set(this.food, 'count', 1) console.log('2') } else { console.log('3') this.food.count++ } this.$emit('add', event.target) }, 发现问题是在goods.vue点击+号的时候,可以成功执行 console.log(this.food.count)。 但是在购物车已经购买的货物折叠面板,点击+号,却没反应,因为this.food.count这个值没有。 其实在折叠面板是可以正常显示的:皮蛋瘦肉粥 ¥80 - 8 + 但是问题:我点击+号的时候,获取不到这个count值
2018-08-22
共1条回复

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程