Question

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

main.js：

public function onNotSuccessfulTest($e) {
    // inspect $e to get the information you need, for ie:
    print_r(get_class_methods($e)); die();
    parent::onNotSuccessfulTest($e);
}

App.vue：

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

export const eventBus = new Vue();

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

Servers.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>

ServerDetails.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>

Answer 1

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

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

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

1 个答案: