从事件总线收到事件后VueJS页面刷新

我正在使用事件总线将数据从一个组件（点击）传递到使用事件总线（同级组件）的另一个组件。当我点击服务器组件中的“服务器”时，它将数据（服务器状态）发送到服务器详细信息组件。该数据将替换服务器详细信息组件中屏幕上的默认消息。问题是服务器状态只显示几分之一秒，然后变回默认消息。似乎每次收到来自事件总线的数据都会刷新页面。从事件总线收到事件后VueJS页面刷新

main.js：

import Vue from 'vue' 
import App from './App.vue' 

export const eventBus = new Vue(); 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
})

App.vue：

<template> 
    <div class="container"> 
     <app-header></app-header> 
     <hr> 
     <div class="row"> 
      <servers></servers> 
      <app-server-details></app-server-details> 
     </div> 
     <hr> 
     <app-footer></app-footer> 
    </div> 
</template> 

<script> 
    import Header from './components/Shared/Header.vue'; 
    import Footer from './components/Shared/Footer.vue'; 
    import Servers from './components/Server/Servers.vue'; 
    import ServerDetails from './components/Server/ServerDetails.vue'; 

    export default { 
     components: { 
      appHeader: Header, 
      Servers, 
      'app-server-details': ServerDetails, 
      'app-footer': Footer 
     } 
    } 
</script> 

<style> 

</style>

Servers.vue：

<template lang="pug"> 
    div.col-xs-12.col-sm-6 
     ul.list-group 
      a(href="" v-for="server in servers" @click="exportStatus(server.id)") 
       li.list-group-item Server \#{{ server.id }} 
</template> 

<script> 
    import {eventBus} from '../../main' 
    export default { 
     data: function() { 
      return { 
       servers: [ 
        {id: 1, status: 'Normal'}, 
        {id: 2, status: 'Critical'}, 
        {id: 3, status: 'Normal'}, 
        {id: 4, status: 'Unknown'}, 
        {id: 5, status: 'Down'}, 
       ] 
      } 
     }, 
     methods: { 
      exportStatus(id) { 
       this.status = this.servers[id -1]; 
       eventBus.$emit('statusUpdate', this.status); 
      } 
     } 
    } 
</script> 

<style scoped> 
    a { 
     text-decoration: none; 
     color: #333; 
    } 
    .list-group-item:hover { 
     color: #fff; 
     background-color: #777; 
    } 
</style>

ServerDetails.vue：

<template lang="pug"> 
    div.col-xs-12.col-sm-6 
     p {{status}} 
</template> 

<script> 
    import {eventBus} from '../../main' 
    export default { 
     data: function() { 
      return { 
       status: 'Server Details are currently not updated' 
      } 
     }, 
     created() { 
      eventBus.$on('statusUpdate', (data) => { 
       this.status = data; 
      }); 
     } 
    } 
</script> 

<style> 

</style>

来源

2017-05-24 SmellydogCoding

你似乎有'a'作为'ul'的孩子，''里面有'li'。这是从内到外。另外，您的'Servers.vue'中的'this.status'应该只是一个局部变量。 –