Question

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

在我的控制器中我有

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

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

我试过，在my.js

var jobs = {{ $jobs }}

但那不行。

Answer 1

对于像阵列这样的更复杂的变量类型，最好的办法是将其转换为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请求中获取数据。

Answer 2

这对我有用

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

Answer 3

只是添加到上面：

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

Answer 4

这种方法对我有用：

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

并在Java脚本中使用

Answer 5

在 laravel 6 中，这对我有用

使用laravel blade指令

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

还使用了@json指令

var jobs = @json($jobs);

使用php样式

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

Answer 6

我刚刚解决了这一问题，方法是在布局文件window的{{1}}对象上放置一个引用，然后使用可以注入任何组件的mixin拾取该引用。

TLDR解决方案

.env

<head>

config / geodata.php

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

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

<?php

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

资源/js/components/mixins/geodataUrl.js

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

用法

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

export default geodataUrl;

END TLDR解决方案

如果需要，可以使用全局混合来代替，只需将其添加到<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>入口点即可：

app.js

但是，我不建议对任何敏感数据使用此模式，因为它位于Vue.mixin({ data() { return { geodataUrl: window.geodataUrl, }; }, });对象上。

我喜欢这个解决方案，因为它不使用任何额外的库，并且代码链非常清晰。它通过了grep测试，您可以在代码中搜索window，并查看所需的所有信息，以了解代码的工作方式和原因。

如果代码可能存在很长一段时间，而另一个开发人员可能遇到该问题，则这一考虑很重要。

但是，我认为"window.geodataUrl"是一个值得拥有的不错的实用程序，但是在过去，我不喜欢出现问题时很难调试，因为您看不到其中的位置。数据来自的代码库。

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

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

JavaScript::put()

此人可以在代码中搜索/* data comes from poop.php via JavaScript::put */并快速找到它。请记住，在忘记实施细节之后的6个月内，“人员”可能就是您自己。

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

"JavaScript::put"

我的意思是，如果您使用props: { chartData: { type: Array, required: true, }, },，那么如果组件无法接收数据，那么Vue无法轻松检测到。 Vue必须假定数据在引用对象时位于窗口Object上。最好的选择是创建一个GET端点，并在创建/装入的生命周期方法中进行访存调用。

我认为在获取/设置数据方面，Laravel和Vue之间必须有明确的约定。

为了通过给您更多选择来帮助您，以下是使用ES6语法糖进行调用的示例：

routes / web.php

JavaScript::put()

app / Http / Controllers / UserController.php

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

Vue中的任何地方，尤其是创建的生命周期方法：

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

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

该示例假定您的Vue组件是Mealy有限状态机，因此该组件在任何给定时间只能处于一种状态，但可以在状态之间自由切换。

我建议使用诸如计算道具之类的状态：

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

带有标记，例如：

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

Answer 7

在较新的laravel版本中，在json "（双引号）中使用htmlentity编码为&quote;，并使用此代码将其不必要地调用JSON.parse()

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

，您将遇到javascript错误。或者，您可以使用

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

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

Answer 8

我在laravel 7中做

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

Answer 9

在 Laravel 8 中，你可以使用刀片模板...

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

Answer 10

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

✓ 在 Laravel 7.x 上测试

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

使用JavaScript显示Laravel的变量

10 个答案: