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

Question

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

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

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

1 2 3 4 5 6 7 8

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

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写了 也没有用 ，应该是 之前代码的问题了