從事件總線收到事件後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'應該只是一個局部變量。 –