javascript - 使用 JavaScript 显示 Laravel 的变量

Question

在我的代码中，我使用typeahead.js。我使用 Laravel 5，我需要var states用我的{{ $jobs }}变量替换。我需要将所有职位列为数组。

在我的控制器中，我有

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

我知道 javascript 中的循环方法，但我不知道如何在 javascript 中“链接”我的刀片变量。有谁知道怎么做？

我试过了，在 my.js

var jobs = {{ $jobs }}

但这行不通。

score 37 · Accepted Answer

对于像数组这样更复杂的变量类型，最好的办法是将其转换为 JSON，在模板中回显并在 JavaScript 中解码。像这样：

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

请注意，PHP 必须运行此代码才能使其工作。在这种情况下，您必须将其放在 Blade 模板中。如果您将 JavaScript 代码放在一个或多个单独的文件中（这很好！），您只需在模板中添加一个内联脚本标记，然后在其中传递变量。（只要确保它在你的 JavaScript 代码的其余部分之前document.ready运行。通常是答案）

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

如果您不喜欢这样做的想法，我建议您在单独的 ajax 请求中获取数据。

score 25 · Accepted Answer

这对我有用

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

注意

仅当您可以保证不$jobs包含用户输入值时才使用此方法。使用{!! ... !!}输出值而不转义它们可能导致跨站点脚本 (XSS) 攻击。

score 12 · Accepted Answer

在laravel 6这对我有用

使用 laravel 刀片指令

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

也使用@json了指令

var jobs = @json($jobs);

使用 php 风格

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

score 5 · Accepted Answer

只是添加到上面：

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); ?>);

score 2 · Accepted Answer

2

这种方法对我有用：

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

并在java脚本中使用

于 2019-08-24T17:28:15.323 回答

score 2 · Accepted Answer

2

在 laravel 7 我只是做

var jobs = '{{ $jobs }}';

于 2020-08-29T08:58:19.483 回答

score 1 · Accepted Answer

在较新的 laravel 版本中，在 json 中"（双引号）通过使用它被编码为htmlentityas&quote;和不需要的JSON.parse()调用，

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

你最终会遇到 javascript 错误。或者，您可以使用

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

正如我们所知，{!! !!}它是用于打印 HTML 的，它会像一个魅力一样工作。这也将减少在浏览器中解析 JSON 的开销。

score 1 · Accepted Answer

最简单的方法是使用@json()Blade 的新指令。

✓ 在 Laravel 7.x 上测试

<script>
    var myVariable = @json($myVariable);
    console.log(myVariable);
</script>

score 1 · Accepted Answer

1

var job_id = '{{ $jobs->first()->id}}';

于 2021-10-09T12:18:40.183 回答

score 0 · Accepted Answer

window我刚刚解决了这个问题，方法是在我的布局文件中的 Object上放置一个引用<head>，然后使用可以注入任何组件的 mixin 来选择该引用。

TLDR 解决方案

.env

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

配置/地理数据.php

<?php

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

资源/视图/布局/root.blade.php

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

资源/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入口点来使用全局 mixin：

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

但是，我不建议将这种模式用于任何敏感数据，因为它位于window对象上。

我喜欢这个解决方案，因为它不使用任何额外的库，而且代码链非常清晰。它通过了 grep 测试，因为您可以搜索代码"window.geodataUrl"并查看您需要了解代码如何以及为什么工作的所有内容。

如果代码可能存在很长时间并且其他开发人员可能会遇到它，那么这种考虑很重要。

但是，JavaScript::put([])在我看来，这是一个值得拥有的不错的实用程序，但在过去，我不喜欢如果发生问题，调试起来会变得非常困难，因为你看不到代码库中数据的来源。

想象一下，您有一些正在使用window.chartData的 Vue 代码来自JavaScript::put([ 'chartData' => $user->chartStuff ]). 根据chartData您的代码库中引用的数量，您可能需要很长时间才能发现哪个 PHP 文件负责window.chartData工作，特别是如果您没有编写该代码并且下一个人不知道JavaScript::put()正在使用该代码.

在这种情况下，我建议在代码中添加注释，例如：

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

然后该人可以搜索代码"JavaScript::put"并快速找到它。请记住，在您忘记实施细节后的 6 个月内，“那个人”可能就是您自己。

像这样使用 Vue 组件 prop 声明总是一个好主意：

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

我的观点是，如果您使用JavaScript::put()，那么如果组件无法接收数据，Vue 就无法轻易检测到。Vue 必须假设数据在它引用它的那一刻就存在于窗口对象上。您最好的选择可能是创建一个 GET 端点并在您创建/安装的生命周期方法中进行 fetch 调用。

我认为在获取/设置数据时，在 Laravel 和 Vue 之间建立明确的合同很重要。

为了通过为您提供选项来尽可能地帮助您，这里有一个使用 ES6 语法糖进行 fetch 调用的示例：

路线/web.php

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

应用程序/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 有限状态机，因此该组件在任何给定时间只能处于一种状态，但它可以在状态之间自由切换。

我建议使用计算道具等状态：

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>

score 0 · Accepted Answer

0

在 Laravel 8 中。您可以在此使用刀片模板...

const jobs = @json($jobs ?? NULL);

于 2021-03-18T14:18:19.343 回答

javascript - 使用 JavaScript 显示 Laravel 的变量

11 回答 11

Related

Reference