2017-02-16 5 views
0

私はVue.jsアプリを開発中で、複数のコンポーネントを使ってシステムにログインしようとしています。 (「プライマリ」コンポーネントであり、ナビゲーションバーを併設しています)私のApp.vueコンポーネントこのボタンがあるのVue.js - v-onを使う:一緒にクリックしてv-リンクする

:1つの、他のファイルで

<a class="nav-item" v-link="'login'" v-if="!user.authenticated">Login</a> 

... 

import auth from '../auth' 

export default { 
data(){ 
    return{ 
    user = auth.user 
    } 
} 
} 

(/auth/index.js)I

... 
    user: { 
    authenticated: false 
    }, 

    login(email, password) { 
    axios.post(LOGIN_URL, { 
     email, 
     password 
    }).then((response) => { 
     this.user.authenticated = true; 
     this.user = response.data; 
     router.go('/home'); 
    }) 
    .catch((error)=>{ 
     console.log(error); 
    }); 
    } 

をそして私は、ログインテンプレートのビューを処理し、必要なのparamsと「auth.login」メソッドを呼び出して別のコンポーネント名Login.vueを持って次のような「AUTH」メソッドを定義します。

ユーザーは、ログイン後にauth.userの値でApp.vueからユーザーを更新する必要があります。どうすればよいですか? v-onを管理する必要がありますか:クリックとvリンクの優先順位を決め、新しい方法を提案しますか?

EDIT:ドキュメントhere

watch: { 
    $route() { 
    this.user = auth.user 
    } 
}, 

:私はまた、私は成功しているわけではないことで、私は解決策がこれを追加見つけることができた

答えて

0

beforeRouteEnterメソッドを使用しようとしている

関連する問題