イベントバスを使用して、イベントバスを使用して(クリックして)あるコンポーネントから別のコンポーネントにデータを渡しています。サーバーコンポーネントで 'サーバー'をクリックすると、サーバーの詳細コンポーネントにデータ(サーバーステータス)が送信されます。このデータは、サーバーの詳細コンポーネントの画面のデフォルトメッセージを置き換えます。問題は、サーバのステータスが1秒未満の間しか表示されず、デフォルトのメッセージに戻ってしまうことです。イベントバスからのデータが受信されるたびにページがリフレッシュされているようです。イベントバスからイベントを受信した後、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>
あなたは 'ul'の子として' a'を、 'a'の内部に' li'を持っているようです。それはインサイドアウトです。また、 'Servers.vue'の' this.status'はローカル変数でなければなりません。 –