web-dev-qa-db-ja.com

JavaScriptを使用してLaravelの変数を表示する

私のコードでは typeahead.js を使用しています。 Laravel 5を使用しており、var states私の{{ $jobs }}変数。すべての役職を配列としてリストする必要があります。

私のコントローラーには

$jobs = Job::all(['job_title']);

JavaScriptでループメソッドを知っていますが、JavaScriptでブレードの変数を「リンク」する方法がわかりません。誰でも方法を知っていますか？

私が試した、my.js

var jobs = {{ $jobs }}

しかし、それはうまくいきません。

javascriptphplaravellaravel-5laravel-blade
14
Sylar

配列のようなより複雑な変数型の場合、最善の策は、それをJSONに変換し、それをテンプレートにエコーし、JavaScriptでデコードすることです。このような：

var jobs = JSON.parse("{{ json_encode($jobs) }}");

PHPは、このコードを実行するために実行する必要があります。この場合は、ブレードテンプレート内に配置する必要があります。JavaScriptコードが1つ以上の個別のファイルにある場合（これは良いことです！）変数を渡すテンプレートにインラインスクリプトタグを追加するだけです（それが実行されることを確認してくださいbefore JavaScriptコードの残りの部分です。通常はdocument.readyがその答えです）

<script>
    var jobs = JSON.parse("{{ json_encode($jobs) }}");
</script>

このようにするのが気に入らない場合は、別のajaxリクエストでデータをフェッチすることをお勧めします。

27
lukasgeiter

これは私のために働く

jobs = {!! json_encode($jobs) !!};
14
Karim Samir

上記に追加するだけです：

var jobs = JSON.parse("{{ json_encode($jobs) }}");

エスケープされたhtmlエンティティを返すため、JavaScriptでjsonオブジェクトをループできなくなります。これを解決するには、以下を使用してください：

var jobs = JSON.parse("{!! json_encode($jobs) !!}");

または

var jobs = JSON.parse(<?php echo json_encode($jobs); ?>);

5
Jimmy Obonyo Abor

laravel 6これは私にとってはうまくいきます

laravel bladeディレクティブを使用する

var jobs = {!! json_encode($jobs) !!};

@jsonディレクティブも使用

var jobs = @json($jobs);

pHPスタイルを使用

 var jobs = <?php echo json_encode($jobs); ?>
2
Jignesh Joisar

このアプローチは私にとってうまくいきます：

var job = {!! json_encode($jobs ) !!}

Javaスクリプトで使用

2
behnam shateri

これを解決するには、レイアウトファイルの<head>のwindowオブジェクトに参照を配置し、任意のコンポーネントに注入できるミックスインでその参照を選択します。

TLDRソリューション

。env

GEODATA_URL="https://geo.some-domain.com"

config/geodata.php

<?php

return [
    'url' => env('GEODATA_URL')
];

resources/views/layouts/root.blade.php

<head>
    <script>
        window.geodataUrl = "{{ config('geodata.url') }}";
    </script>
</head>

resources/js/components/mixins/geodataUrl.js

const geodataUrl = {
    data() {
        return {
            geodataUrl: window.geodataUrl,
        };
    },
};

export default geodataUrl;

使用量

<template>
    <div>
        <a :href="geodataUrl">YOLO</a>
    </div>
</template>

<script>
import geodataUrl from '../mixins/geodataUrl';

export default {
    name: 'v-foo',

    mixins: [geodataUrl],

    data() {
        return {};
    },

    computed: {},

    methods: {},
};
</script>

TLDRソリューションの終了

必要に応じて、これをapp.jsエントリポイントに追加することにより、代わりにグローバルミックスインを使用できます。

Vue.mixin({
    data() {
        return {
            geodataUrl: window.geodataUrl,
        };
    },
});

ただし、このパターンはwindowオブジェクト上にあるため、機密データには使用しないことをお勧めします。

このソリューションは、追加のライブラリを使用せず、コードのチェーンが非常に明確であるため、気に入っています。コードを"window.geodataUrl"で検索し、コードが機能する方法と理由を理解するために必要なすべてを確認できるという点で、grepテストに合格しています。

コードが長期間存続し、別の開発者がそれに遭遇する可能性がある場合、その考慮事項は重要です。

しかし、JavaScript::put([])は私が思うに、持つ価値のあるまともなユーティリティですが、過去に問題が発生した場合にデバッグするのが非常に難しいことが嫌いでした。データのコードベース。

いくつかのVueを消費するコードがJavaScript::put([ 'chartData' => $user->chartStuff ])からのwindow.chartDataを使用していると想像してください。コードベースでのchartDataへの参照の数によっては、特にPHPファイルがwindow.chartDataを機能させる責任があったファイルを発見するのに非常に長い時間がかかります。特に、そのコードを記述せず、次の人が知らない場合はJavaScript::put()使用されています。

その場合、次のようにコードにコメントを入れることをお勧めします。

/* data comes from poop.php via JavaScript::put */

次に、その人はコードを"JavaScript::put"で検索し、すばやく見つけることができます。実装の詳細を忘れてから6か月後には、「人」が自分になる可能性があることに注意してください。

Vueコンポーネントのプロップ宣言を次のように使用することは常に良い考えです：

props: {
    chartData: {
        type: Array,
        required: true,
    },
},

私の要点は、JavaScript::put()を使用する場合、Vueは、コンポーネントがデータを受信できない場合、簡単に検出できません。Vue mustデータが参照する瞬間にデータがウィンドウオブジェクトにあると想定します。代わりに、GETエンドポイントを作成して、作成/マウントされたライフサイクルメソッドでフェッチ呼び出しを行うのが最善の方法です。

データの取得/設定に関しては、LaravelとVue）の間で明示的な契約を結ぶことが重要だと思います。

オプションを提供することでできる限り支援するために、ES6構文シュガーを使用してフェッチ呼び出しを行う例を次に示します。

routes/web.php

Route::get('/charts/{user}/coolchart', 'UserController@getChart')->name('user.chart');

app/Http/Controllers/UserController.php

public function getChart(Request $request, User $user)
{
    // do stuff
    $data = $user->chart;

    return response()->json([
        'chartData' => $data,
    ]);
}

Vueのどこでも、特に作成されたライフサイクルメソッド：

created() {
    this.handleGetChart();
},

methods: {
    async handleGetChart() {
        try {
            this.state = LOADING;
            const { data } = await axios.get(`/charts/${this.user.id}/coolchart`);

            if (typeof data !== 'object') {
                throw new Error(`Unexpected server response. Expected object, got: ${data}`);
            }

            this.chartData = data.chartData;
            this.state = DATA_LOADED;
        } catch (err) {
            this.state = DATA_FAILED;
            throw new Error(`Problem getting chart data: ${err}`);
        }
    },
},

この例では、VueコンポーネントがMealy有限状態マシンであることを前提としています。これにより、コンポーネントは常に1つの状態にしかなりませんが、状態を自由に切り替えることができます。

計算された小道具としてこのような状態を使用することをお勧めします。

computed: {
    isLoading() { return (this.state === LOADING); },
    isDataLoaded() { return (this.state === DATA_LOADED); },
    isDataFailed() { return (this.state === DATA_FAILED); },
},

次のようなマークアップで：

<div v-show="isLoading">Loading...</div>
<v-baller-chart v-if="isDataLoaded" :data="chartData"></v-baller-chart>
<button v-show="isDataFailed" type="button" @click="handleGetChart">TRY AGAIN</button>
0
agm1984