在我的代码中，我正在使用typeahead.js。我使用 Laravel 5，我需要用我的 {{ $jobs }} 变量替换var states。我需要将所有职位列为数组。
在我的控制器中，我有
$jobs = Job::all(['job_title']);
我知道 javascript 中的循环方法，但我不知道如何在 javascript 中"链接"我的刀片变量。有人知道怎么做吗？
我已经尝试过了，在我的.js
var jobs = {{ $jobs }}
但这行不通。
对于更复杂的变量类型，如数组，最好的选择是将其转换为 JSON，在模板中回显并在 JavaScript 中解码。喜欢这个：
var jobs = JSON.parse("{{ json_encode($jobs) }}");
请注意，PHP 必须运行此代码才能使其工作。在这种情况下，您必须将其放入刀片模板中。如果你的 JavaScript 代码在一个或多个单独的文件中(这很好！(，你可以将一个内联脚本标签添加到你的模板中，你可以在其中传递变量。(只要确保它在其余的 JavaScript 代码之前运行即可。通常document.ready是答案(
<script>
var jobs = JSON.parse("{{ json_encode($jobs) }}");
</script>
如果您不喜欢这样做的想法，我建议您在单独的 ajax 请求中获取数据。
我有用
jobs = {!! json_encode($jobs) !!};
通知
仅当可以保证$jobs不包含任何用户输入值时，才使用此方法。使用 {!! ... !!} 输出值而不转义它们，这可能会导致跨站点脚本 (XSS( 攻击。
在 Laravel 6 中这对我有用
使用拉拉维尔刀片指令
var jobs = {!! json_encode($jobs) !!};
也用于@json指令
var jobs = @json($jobs);
使用 PHP 样式
var jobs = <?php echo json_encode($jobs); ?>
只是为了补充上面：
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); ?>);
在 laravel 7 中，我只是做
var jobs = '{{ $jobs }}';
一个简单的方法是使用Blade的新@json()指令。
✓在Laravel 7.x上测试
<script>
let myVariable = @json($myVariable)
console.log(myVariable)
</script>
这种方法对我有用：
var job = {!! json_encode($jobs ) !!}
并在 Java 脚本中使用
在较新的 laravel 版本中，在 json "(双引号(被编码为htmlentity，作为"e;和不需要的JSON.parse()调用，请使用它，
var jobs = JSON.parse("{{ json_encode($jobs) }}");
你最终会得到JavaScript错误。或者，您可以使用
var jobs = {!! json_encode($jobs, JSON_PRETTY_PRINT) !!};
众所周知，{!! !!}用于打印 HTML，它将像一个魅力一样工作。这也将减少在浏览器中解析 JSON 的开销。
我刚刚通过在布局文件<head>的window对象上放置一个引用来解决这个问题，然后使用可以注入任何组件的 mixin 来选取该引用。
顶级域名解决方案
.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>
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入口点来改用全局 mixin：
Vue.mixin({
data() {
return {
geodataUrl: window.geodataUrl,
};
},
});
但是，我不建议对任何敏感数据使用此模式，因为它位于window对象上。
我喜欢这个解决方案，因为它不使用任何额外的库，而且代码链非常清晰。它通过了 grep 测试，因为您可以在代码中搜索"window.geodataUrl"并查看了解代码如何以及为什么工作所需的一切。
如果代码可能存在很长时间并且其他开发人员可能会遇到它，则此注意事项很重要。
但是，在我看来，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 组件 prop 声明总是一个好主意：
props: {
chartData: {
type: Array,
required: true,
},
},
我的观点是，如果你使用 JavaScript::put() ，那么 Vue 无法轻易检测到组件是否无法接收数据。Vue 必须假设数据在它引用它的时刻就存在于窗口 Object 上。最好的办法可能是创建一个 GET 端点，并在您创建/挂载的生命周期方法中进行提取调用。
我认为在获取/设置数据时，Laravel和Vue之间有明确的合同很重要。
为了通过为您提供选项来尽可能多地帮助您，下面是一个使用 ES6 语法糖进行获取调用的示例：
路线/网络.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 有限状态机，因此该组件在任何给定时间只能处于一种状态，但它可以在状态之间自由切换。
我建议使用这样的状态作为计算道具：
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>
在 Laravel 8 中。您可以使用刀片模板来解决这个问题...
const jobs = @json($jobs ?? NULL);
var job_id = '{{ $jobs->first()->id}}';