Laravel 前后台共享数据

在视图模板中初始化JS变量。
<script>
    var app = <?php echo json_encode($array); ?>;
</script>

5.5以后可以这么写, 用 @json Blade 指令替代手动 json_encode

<script>
    var app = @json($array);
</script>

曾经在多语言项目中这么用过。

<script>
    window.Laravel = {
        csrfToken: '{{ csrf_token() }}',
        Locale: '<?php echo \App::getLocale(); ?>',
        Languages: <?php echo json_encode(
            [
                'scaffold'         => __('scaffold::t'),
                'module_dashboard' => __('module_dashboard::t'),
                'module_user' => __('module_user::t'),
                'setting' => __('setting::t'),
            ],
            JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);?>
    };
</script>
Laravel变量传入在vue组件中

定义组件

<script>
export default {
    props: ['surveyData'],
    mounted () {
        // Do something useful with the data in the template
        console.dir(this.surveyData)
    }
}
</script>

注入变量

<survey-component :survey-data="'{!! json_encode($surveyData) !!}'"></survey-component>

参考: https://medium.com/@m_ramsden/passing-data-from-laravel-to-vue-98b9d2a4bd23 https://laravel-china.org/docs/laravel/5.6/blade/1375

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏高性能服务器开发

windows完成端口(二)

系列目录 windows完成端口(一) windows完成端口(二) windows完成端口(三) windows完成端口(四) windows完成端口(五) ...

422110
来自专栏晓晨的专栏

VS2015 搭建 Asp.net core 开发环境

35450
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二十三天 Web商城实战三【悟空教程】

<a href="${pageContext.request.contextPath}/OrderServlet?method=findByUid">我的订单<...

20410
来自专栏xingoo, 一个梦想做发明家的程序员

Java程序员的日常—— Spring Boot单元测试

关于Spring boot 之前没有用Spring的时候是用的MockMvc,做接口层的测试,原理上就是加载applicationContext.xml文件,然...

35750
来自专栏安恒网络空间安全讲武堂

[HCTF] share write up

从http://share.2018.hctf.io/robots.txt中获取到题目部分源码

11420
来自专栏菩提树下的杨过

spring集成kafka

一、添加依赖项 compile 'org.springframework.kafka:spring-kafka:1.2.2.RELEASE' 二、发消息(生产者...

23780
来自专栏高性能服务器开发

windows完成端口(六)

系列目录 windows完成端口(一) windows完成端口(二) windows完成端口(三) windows完成端口(四) windows完成端口(五) ...

36840
来自专栏Google Dart

Flutter 构建完整应用手册-联网 顶

从大多数应用程序获取互联网上的数据是必要的。 幸运的是,Dart和Flutter为这类工作提供了工具!

14820
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二十一天 Web商城实战一【悟空教程】

public class BaseServlet extends HttpServlet {

22740
来自专栏24K纯开源

OpenProcess打开进程返回错误的问题

问题描述       项目中需要做一个小功能:能够查看系统中当前正在运行的进程的内存信息,如内存块类型、分配状态、访问权限等。如下图所示: ?       需要...

494100

扫码关注云+社区

领取腾讯云代金券