鍍金池/ 問答/HTML/ vue emit事件報(bào)錯(cuò) Cannot read property '0' of

vue emit事件報(bào)錯(cuò) Cannot read property '0' of undefined"

vue組件通信,運(yùn)行總是報(bào)錯(cuò)[Vue warn]: Error in event handler for "onballdrop": "TypeError: Cannot read property '0' of undefined"
學(xué)習(xí)模塊化開發(fā),沒有使用vuex和vue-bus,這個(gè)地方卡了很久,求大神指教
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;
            }
        }
回答
編輯回答
尐懶貓

balls,另外,既然有$on就應(yīng)該有$off,放在destoryed里面處理,不然會(huì)多次綁定事件

2017年8月24日 18:48