从事件总线接收到事件后，VueJS 页面刷新答案

【问题标题】：VueJS page refreshes after an event is received from the event bus从事件总线接收到事件后，VueJS 页面刷新
【发布时间】：2017-05-24 17:53:44
【问题描述】：

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

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>

【问题讨论】：

您似乎有一个a 作为ul 的子级，在a 内有一个li。那是由内而外。此外，Servers.vue 中的 this.status 应该只是一个局部变量。

标签： javascript vue.js vue-component

【解决方案1】：

您的页面已刷新，因为您的链接有href=""。删除它，它不会回发。或者使用不同的标签并使其可点击。

例如，您可以将点击处理程序（和 v-for）添加到您的 li。

【讨论】：

就是这样。谢谢！