vue emit事件报错 Cannot read property '0' of

Question

vue组件通信，运行总是报错[Vue warn]: Error in event handler for "onballdrop": "TypeError: Cannot read property '0' of undefined"

学习模块化开发，没有使用vuex和vue-bus，这个地方卡了很久，求大神指教

main

new Vue({

  data: {

      eventBus: new Vue()

  },

  router: router.routers,

  components: { App },

  render: rout => rout(App)

}).$mount('#app');

carcontrol组件

<div class="add icon-add_circle" @click='addCart'></div>

methods: {

        addCart (event) {

            if (!event._constructed) {

                return

            }

            if (!this.food.count) {

                Vue.set(this.food, 'count', 1);

            } else {

                this.food.count++;

            }

            this.$root.eventBus.$emit('onballdrop', event.target);

            // console.log(this.$root.eventBus);

        }

}

shopcar组件

<transition-group 

        name='drop' 

        @before-enter='beforeEnter' 

        @enter='enter' 

        @after-enter='afterEnter'>

            <div class='ball' v-for='(ball, ballIdx) in balls' 

            v-show='ball.show' :key='ballIdx'></div>

        </transition-group>

data () {

        return {

            balls: [{

                show: false

            },{

                show: false

            },{

                show: false

            },{

                show: false

            },{

                show: false

            }],

            dropBalls: [],

        }

    },

created() {

        this.$root.eventBus.$on('onballdrop', this.dropped)

    },

    methods: {

        dropped(ev) {

            console.log(ev);

            for(let i = 0; i < this.balls.length; i++) {

                let ball = this.ball[i];

                if (!ball.show) {

                    ball.show = true;

                    ball.el = ev;

                }

                this.dropBalls.push(ball);

                return;

            }

        }

Answer 1

balls，另外，既然有$on就应该有$off，放在destoryed里面处理，不然会多次绑定事件