laravel→からjsにデータ渡す、その後のjs側での変数存在の確認方法について(vue.js)

Question

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,
        }
    });
}

Comments

[euledge]

$loginをhtml側でレンダリングしたときには値は渡っているのでしょうか?

Answer 1

https://laracasts.com/discuss/channels/laravel/opening-a-model-window-from-a-methodroute
こちら参考
@if(!empty($data) && $data == true)
<script>
//modal表示のコード
</script>
@endif

このようにlaravelのif文で囲い、中にscriptを挿入

Answer 2

laravelについて経験がなかったため、Bradeの変数展開の挙動がわからなかったのですが、ちょっと調べて確認してみたら解決策見つけたので追加で回答します。

必要だったのは、Bladeから渡される変数が undefinedだった場合の対応だけだったようです。
したがって元々のPHPでBlade変数に渡す部分は以下のままで問題ないです。

return view('main')->with([
  'login' => true,  
]);

Javascript側では、@json()を行う前に@issetが必要でした。

<script>
var login = false; //$loginがundefinedの場合の初期値
@isset($login)
login = @json($login); // jsの変数login = 1になります
@endisset
if (login) {
}
</script>

以上を踏まえて、以下ではどうでしょうか？

new Vue({
    el: '#app2',
    data: {
        showModal: false,
    },
    mounted: function () {
       let login = false;
       @isset($login)
       login = @json($login);
       @endisset
       this.showModal = login;
    }
});

---

また、これは今回の質問の範囲を超えるかもしれないのですが、気になったので補足します。
larabelで認証の機能を使っていれば、Bladeで以下のような制御できるようです。したがってコントローラーでそもそもフラグを渡す必要がないのではないかと思います。

@unless (Auth::check())
    あなたはログインしていません。
@endunless

や

@auth
    // ユーザーは認証済み
@endauth

@guest
    // ユーザーは認証されていない
@endguest

上の説明はLaravel 5.5 Bladeテンプレートの認証ディレクティブの項目にあります。

Answer 3

この書き方ではdataがudefinedのエラーが下のnew Vue箇所で出る、console.logでif文の中を通っていることは確認済み(しかしif文の外に書くとエラーは出ない!)

に関しては、変数スコープの問題です。constやletで定義された変数のスコープはそのブロック内になりますので、dataは if文の中でしか参照することができません。外で見る必要があるのであれば if文の外で変数定義をする必要があります。

サーバー側で login が渡されなかった場合も考慮してこの部分は以下のようにしてみました。

let login = false
if(typeof @json($data) != 'undefined'){
    const data = @json($data);
    if(data.login) {
       login = true;
    } else {
       login = false;
    }
}

---

以下、 data.login が参照できるようになった前提でのVueインスタンスへの初期値の与え方の説明です。

Vue.jsにはインスタンスライフサイクルフックというものがあります。Vueのインスタンスが作成される特定の段階においてユーザーが処理を追加できるものです。

よく使うのは mounted と呼ばれる。画面のレンダリングが完了したときに行う処理のフックです。
この中で先のサーバーから渡された値を Vueで管理するdataに渡すことができます。

Vue公式ガイド - インスタンスライフサイクルフック

new Vue({
    el: '#app2',
    data: {
        showModal: false,
    },
    mounted: function () {
       this.showModal = data.login;
    }
});

Comments

[kazoogon]

ありがとうございます。
おかげ様でloginのモーダルが表示されるようになりました。
が、しかし「if(typeof @json($data) != 'undefined')」の記述でundefinedのエラーが$dataが渡されていないとき(普通にページを開いたとき)に発生してしまいます。
$dataのままではJSで使用できず、json形式にしようとしても、そのデータが定義されてもいないと怒られ困っております。。

[kazoogon]

また「letとconstはif文内でしか読み込まない」。こちら勉強になりました、ありがとうございます。

Answer 4

//mainページに飛ぶようにし、login = trueという情報を送る
  return view('main')->with([
    'login' => true,  
  ]);

とありますが、$loginに入る値は trueであって jsonの形式{'login' : true}ではないのではないでしょうか？おそらく下記のようにする必要があるのではないでしょうか?

//mainページに飛ぶようにし、login = trueという情報を送る
  return view('main')->with([
    'data' => [
       'login'=> true
    ]  
  ]);

const data = @json($data);
console.log(data); // {'login': true}

【参考】https://styde.net/directiva-json-de-blade-en-laravel/

---

また、Javascript部分でこのようにしていますが、undefinedの時に var login = @json($login);
というのはおかしいのでは？undefinedでないときに値をセットするのであればわかりますが...

if(typeof @json($login) == 'undefined'){
    var login = @json($login);
}

Comments

[kazoogon]

回答ありがとうございます。
ご指摘された部分は訂正いたしました、しかしまだ問題点がありましたので本文「回答を受けての追記」に追記させていただきました。
よろしくお願いいたします。

[euledge]

if(data.login == true){}でVueのインスタンスの生成を切り替えるのは、正しくない方法だと思いますよ。他のところも後ほど見てみます。

[euledge]

@json($login) ではなく $jsonを HTML上にレンダリング(<span>とかで)した場合はどのように表示されますか？
(データが渡っているかと、どのような形式になっているかの確認です)

[kazoogon]

{{$data}} を直接bladeファイルに記入すると「htmlspecialchars() expects parameter 1 to be string, array given 」と出ますね、これはdataの中にlogin => trueっていうデータが入っているのが原因だとは思いますが。