CODEWITHSUNDEEP
javascriptvue.jsvue-component
SmellydogCoding
SmellydogCoding

Reputation: 464

VueJS page refreshes after an event is received from the event bus

I am using the event bus to pass data from one component (on click) to another component using the event bus (sibling components). When I click on a 'server' in the servers component it sends data (server status) to the server details component. This data replaces the default message on the screen in the server details component. The problem is that the server status only displays for a fraction of a second, then changes back to the default message. It seems like the page is being refreshed every time data from the event bus is received.

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>

Upvotes: 2

Views: 1176

Answers (1)

Bert
Bert

Reputation: 82499

Your page is refreshed because your link has href="". Remove that and it will not post back. Or use a different tag and make it clickable.

You could just add the click handler (and v-for) to your li for example.

Upvotes: 4

Related Questions