web-dev-qa-db-fra.com

Utiliser JavaScript pour afficher la variable de Laravel

Dans mon code, j'utilise typeahead.js . J'utilise Laravel 5 et je dois remplacer le var states avec moi {{ $jobs }} variable. Je dois répertorier tous les titres de poste sous forme de tableau.

Dans mon contrôleur, j'ai

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

Je connais la méthode de boucle en javascript mais je ne sais pas comment "lier" la variable de ma lame dans le javascript. Tout le monde sait comment?

J'ai essayé, dans my.js

var jobs = {{ $jobs }}

Mais cela ne fonctionnera pas.

javascriptphplaravellaravel-5laravel-blade
14
Sylar

Pour les types de variables plus complexes comme les tableaux, votre meilleur pari est de le convertir en JSON, de le répéter dans votre modèle et de le décoder en JavaScript. Comme ça:

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

Notez que PHP doit parcourir ce code pour le faire fonctionner. Dans ce cas, vous devrez le mettre dans votre modèle Blade. Si vous avez votre code JavaScript dans un ou plusieurs fichiers séparés (ce qui est bien!) vous pouvez simplement ajouter une balise de script en ligne à votre modèle où vous passez vos variables. (Assurez-vous simplement qu'il s'exécute avant le reste de votre code JavaScript. Habituellement document.ready est la réponse à cela)

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

Si vous n'aimez pas l'idée de le faire comme ceci, je vous suggère de récupérer les données dans une demande ajax distincte.

27
lukasgeiter

Ça marche pour moi

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

Juste pour ajouter à ce qui précède:

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

renverra des entités html échappées, vous ne pourrez donc pas faire de boucle sur l'objet json en javascript, pour résoudre ce problème, veuillez utiliser ci-dessous:

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

ou

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

5
Jimmy Obonyo Abor

in laravel 6 cela fonctionne pour moi

en utilisant laravel directive blade

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

également utilisé @json directive

var jobs = @json($jobs);

en utilisant le style php

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

cette approche fonctionne pour moi:

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

et utiliser dans Java

2
behnam shateri

Je viens de résoudre ce problème en plaçant une référence sur l'objet window dans le <head> De mon fichier de mise en page, puis en ramassant cette référence avec un mixin qui peut être injecté dans n'importe quel composant.

SOLUTION TLDR

. env

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

config/geodata.php

<?php

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

ressources/vues/mises en page/root.blade.php

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

ressources/js/composants/mixins/geodataUrl.js

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

export default geodataUrl;

tilisation

<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>

FIN DE LA SOLUTION TLDR

Si vous le souhaitez, vous pouvez utiliser un mixin global à la place en l'ajoutant à votre point d'entrée app.js:

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

Cependant, je ne recommanderais pas d'utiliser ce modèle pour toutes les données sensibles car il se trouve sur l'objet window.

J'aime cette solution car elle n'utilise aucune bibliothèque supplémentaire et la chaîne de code est très claire. Il passe le test grep, en ce sens que vous pouvez rechercher votre code pour "window.geodataUrl" Et voir tout ce dont vous avez besoin pour comprendre comment et pourquoi le code fonctionne.

Cette considération est importante si le code peut vivre longtemps et qu'un autre développeur peut le rencontrer.

Cependant, JavaScript::put([]) est à mon avis, un utilitaire décent qui peut valoir la peine, mais dans le passé, je n'aimais pas qu'il soit extrêmement difficile de déboguer en cas de problème, car vous ne pouvez pas voir où dans le base de code d'où proviennent les données.

Imaginez que vous ayez du code Vue qui consomme window.chartData Provenant de JavaScript::put([ 'chartData' => $user->chartStuff ]). Selon le nombre de références à chartData dans votre base de code, cela pourrait vous prendre très longtemps pour découvrir quel PHP était responsable du bon fonctionnement de window.chartData, surtout si vous n'avez pas écrit ce code et la personne suivante n'a aucune idée que JavaScript::put() est utilisée.

Dans ce cas, je recommande de mettre un commentaire dans le code comme:

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

Ensuite, la personne peut rechercher le code pour "JavaScript::put" Et le trouver rapidement. Gardez à l'esprit que "la personne" pourrait être vous-même dans les 6 mois après avoir oublié les détails de mise en œuvre.

C'est toujours une bonne idée d'utiliser les déclarations Vue prop de composant comme ceci:

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

Mon point est que si vous utilisez JavaScript::put(), alors Vue ne peut pas détecter aussi facilement si le composant ne reçoit pas les données. Vue doit supposons que les données se trouvent sur l'objet fenêtre au moment où elles y font référence. Le mieux est peut-être de créer un point de terminaison GET et d'effectuer un appel de récupération dans votre méthode de cycle de vie créée/montée.

Je pense qu'il est important d'avoir un contrat explicite entre Laravel et Vue quand il s'agit d'obtenir/définir des données.

Dans l'intérêt de vous aider autant que possible en vous donnant des options, voici un exemple de faire un appel de récupération en utilisant le sucre de syntaxe ES6:

routes/web.php

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

application/Http/Contrôleurs/UserController.php

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

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

Partout dans Vue, en particulier une méthode de cycle de vie créée:

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

Cet exemple suppose que votre composant Vue est une machine à états finis Mealy, où le composant ne peut être que dans un état à un moment donné, mais il peut librement basculer entre les états.

Je recommanderais d'utiliser de tels états comme accessoires calculés:

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

Avec un balisage tel que:

<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