laravel5.5(vue.js)を使用し、学校システムを構築しております
実現したいこと
hoge.comページのloginボタンを押したらlogin modalが現れる(実装済み)
hoge.com/login のurlにアクセスされたら(cookie切れていたり、login必要なページurlを直接たたいたりした場合)
→mainページのlogin modalが表示されている状態のページを表示したい
実装方法
PHP→jsにhoge.com/loginアクセスの場合何か情報を送る
→vue.jsのdata情報を切り替えて、modalを出現させた状態にしたい
//AuthenticatesUsers.php trait AuthenticatesUsers { use RedirectsUsers, ThrottlesLogins; public function showLoginForm() { //mainページに飛ぶようにし、login = trueという情報を送る return view('main')->with([ 'login' => true, ]); } //以下省略 }
//mainページのjs部分(modalのhtml部分が必要でしたら、追加いたします) //このようにPHPのissetのようにしたいが、Undefined variable: login のエラー if(typeof @json($login) == 'undefined'){ var login = @json($login); } Vue.component('modal', { template: '#modal-template', props: ['show'], mounted: function () { document.addEventListener("keydown", (e) => { if (this.show && e.keyCode == 27) { this.close(); } }); }, methods: { close: function () { this.$emit('close'); } } }); new Vue({ el: '#app2', data: { showModal: false,//この値をhoge.com/loginにアクセスされた場合はtrueにしたい } });
問題点
①既にコード内に書きましたが、PHP->JSに情報を投げる
→isset内のjson化ですでに$loginが無いのでエラーが出る
②また情報をjs側にて取得できた場合もどのようにdataを変更すればよいのか?
よろしくお願いいたします。
回答を受けての追記
//この書き方ではdataがudefinedのエラーが下のnew Vue箇所で出る、console.logでif文の中を通っていることは確認済み(しかしif文の外に書くとエラーは出ない!) if(typeof @json($data) != 'undefined'){ const data = @json($data); } //login modalを表示するしないのif文の書き方ですが、この書き方よりもっと賢いやり方はないのかな??と思っております if(data.login == true){ new Vue({ el: '#app2', data: { showModal: true, } }); }else{ new Vue({ el: '#app2', data: { showModal: false, } }); }
回答4件
あなたの回答
tips
プレビュー