vue2.0 food组件中小球动画出不来。。

Question

在goods组件中小球动画是正常的

food组件中console.log(event.target);结果是

也不报错，增减价格计算没有问题，不晓得到底是哪里出了问题。。。

<div class="cartcontrol-wrapper">
  <cartcontrol :food="food"></cartcontrol>
</div>

<!--加入购物车-->
<transition name="fade">
  <div @click="addFirst" class="buy" v-show="!food.count || food.count === 0">加入购物车</div>
</transition>

import BScroll from 'better-scroll';
import cartcontrol from 'components/cartcontrol/cartcontrol';
import Vue from 'vue';

export default {
  props: {
    food: {
      type: Object
    }
  },
  data() {
    return {
      showFlag: false
    };
  },
  methods: {
    show() {
      this.showFlag = true;
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.food, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    hide() {
      this.showFlag = false;
    },
    addFirst(event) {
      if (!event._constructed) {
        return;
      }
      console.log(event.target);
      // 抛物线小球动画
      this.$emit('add', event.target);
      Vue.set(this.food, 'count', 1);
    }
  },
  components: {
    cartcontrol
  }
};

Answer 1

ustbhuangyi 2017-02-16 02:14:32

最好对比一下我的源码，看看哪块有问题

• 大脚哈哈哈哈哈 #1

  <cartcontrol @add="addFood" :food="food"></cartcontrol>
  
  源码里是这样，需要监听add事件。但是原理我也不是很清楚，而且addfood函数里写的也不是掉落动画。老师可以解释一下吗~

• 大脚哈哈哈哈哈 #2

  又看了一下，是否是因为监听事件实现的小球动画位于goods里面，在food组件里无法调用，所以子组件cartcontrol触发的add事件需要再次在food组件里监听？

Answer 2

天5 2017-07-10 14:46:42

解决了 你去 <food @add="addFood" :food="selectedFood" ref="food"></food>
  good组件加上 @add

Answer 3

野山椒鸡杂 2018-02-28 11:01:51

最后你的问题是什么，我也遇到啦

Answer 4

我就是那个胖子 2017-05-12 21:24:08

组建缺少 @add="addFood"

• 天5 #1

  加了这个 然后也在 methods写了 也没有用 ，应该是 之前代码的问题了