Почему этот слушатель Vue Event Bus не работает? - PullRequest
Новая
       29

Почему этот слушатель Vue Event Bus не работает?

0 голосов
/ 12 октября 2018

Событие $ emit вызывается в одном из компонентов (оно отображается в консоли инструментов Vue.js dev), однако компонент на принимающей стороне не работает должным образом.Цель состоит в том, чтобы собрать данные из нескольких полей ввода в форме и отобразить их в другом компоненте в многошаговой форме.Я не могу найти проблему.Я не могу получить данные для отображения в компоненте прослушивания.

файл app.js: 

import Vue from 'vue'
import VueRouter from 'vue-router'

export const eventBus = new Vue();

Vue.use(VueRouter)

import App from './views/App'
import petsInfo from './views/petInfo'
import paymentInfo from './views/paymentInfo'
import confirmation from './views/confirmation'



const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'pets',
            component: petsInfo
        },
        {
            path: '/payment',
            name: 'payment',
            component: paymentInfo
        },
        {
            path: '/confimation',
            name: 'confirmation',
            component: confirmation
        },
    ],
});



const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

излучающий компонент: 

<template>
    <div class="container">
        <input type="text" class="form-control" id="name" placeholder="Name" v- 
        model="name">       
        <router-link :to="{ name: 'payment' }" class="next-finish-btn" 
        @click.native="handleSubmit">Next</router-link>
    </div>
</template>
    <script>
        import { eventBus } from '../app';

    export default { 
     data () {
        return {
          name: ''
        }
      },
      methods: {
        handleSubmit() {
          eventBus.$emit('form-submitted', this.name)
        },
      }
    }
    </script>

прослушивающий / принимающий компонент: 

<template>
   <div class="container">
     {{ name }}
   </div>
</template>
    <script>
        import { eventBus } from '../app';

export default { 
 data () {
    return {
      name: ''
    }
  },
  methods: {
        mounted() {
           eventBus.$on('form-submitted', data => {
                this.name = data
            })
        }
  }

}
</script>
...