Я не могу передать данные от дочерних к родительским маршрутизаторам с помощью vue.js.
Из немногих исследований, в том числе по переполнению стека, очень ясно, что мы должны использовать метод $ emit () изребенок.Я играл между документацией, stackoverflow и некоторыми учебными пособиями по YouTube, но все еще кое-что, что я пропускаю, и я делаю неправильно.
Ниже мой маршрутизатор Menubar.vue
<template>
<div id="app" class="container-fluid">
<div @clicked="onClickChild">
<p>login is set to {{ loggedin }}</p>
<p>Route query login {{ this.$route.query.loggedin }}</p>
</div>
<div v-if="!loggedin">
<nav>
<!--<router-link class="btn btn-primary" to="/">Customers</router-link>-->
<router-link class="btn btn-primary" to= "/menubar/login">Login</router-link>
<router-link class="btn btn-primary" to="/menubar/register">Register</router-link>
</nav>
</div>
<div v-else>
<nav>
<!--<router-link class="btn btn-primary" to="/">Customers</router-link>-->
<button class="btn btn-primary" v-on:click="logout()">Logout</button>
<router-link class="btn btn-primary" to="/edit">Edit</router-link>
</nav>
</div>
<br/>
<router-view/>
</div>
</template>
<script>
export default {
name: "menubar",
data(){
return{
loggedin:false,
}
},
created() {
if(this.$route.query.loggedin){
this.loggedin = this.$route.query.loggedin;
}
},
methods: {
logout(){
this.loggedin = false;
},
onClickChild (value) {
this.loggedin = value;
console.log(value) // someValue
}
}
}
</script>
и его дочерний вход.vue
<template>
<div class="submitform">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" required v-model="user.username" name="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" required v-model="user.password" name="password">
</div>
<button v-on:click="logUser()" class="btn btn-success">Connect</button>
</template>
<script>
import router from '../../router'
export default {
name: "login",
data(){
return{
user: {
id: 0,
username: "",
password: ""
},
}
},
methods:{
logUser(){
var loggedin = true;
this.$emit('clicked', loggedin);
router.push({ name: "menubar" });
}
}
}
</script>
my router.js
{
path: "/menubar",
name: "menubar",
component: Menubar,
children: [
{
path: "login",
name: "login",
component: Login,
},
{
path: "register",
name: "register",
component: Register,
}
]
}
console.log должен напечатать true или false, чтобы отслеживать мои параметры 'loggedin' Вместо этого, не знаю, связано ли это,У меня есть это: [HMR] Ожидание сигнала обновления от WDS ...
, который выдает в моем браузере Mozilla (то же самое в Chrome):
Адрес не был понят Firefoxне знает, как открыть этот адрес, потому что один из следующих> протоколов (view-source, webpack) не связан ни с одной программой или не разрешен в этом контексте.Вам может потребоваться установить другое программное обеспечение, чтобы открыть этот адрес. "
Заранее благодарим за помощь.