質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • Laravel 5

    1695questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Laravel

    605questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

  • Vue.js

    580questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 277

kazoogon

score 195

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,
        }
    });
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • euledge

    2018/05/31 01:05

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

    キャンセル

回答 4

check解決した方法

0

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を挿入

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/01 18:26

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

    キャンセル

  • 2018/06/01 19:20

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

    キャンセル

  • 2018/06/01 19:24

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

    キャンセル

  • 2018/06/01 19:49

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

    キャンセル

0

この書き方では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;
    }
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/02 04:56

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

    キャンセル

  • 2018/06/02 05:00

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

    キャンセル

0

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テンプレートの認証ディレクティブの項目にあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Laravel 5

    1695questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Laravel

    605questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

  • Vue.js

    580questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。