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

Question

老师，您好，我在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)

    },

帮忙帮忙，谢谢老师。

Answer 1

ustbhuangyi 2018-08-22 11:00:06

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

• 提问者 littlefire #1

  已经对比了源码，代码是跟源码一样的。我在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值