Laravel 前后台共享数据

简介: 在视图模板中初始化JS变量。 var app = ;5.5以后可以这么写, 用 @json Blade 指令替代手动 json_encode var app = @json($array);曾经在多语言项目中这么用过。
在视图模板中初始化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

相关文章
|
7月前
|
前端开发 API 开发者
Javaweb之前后台分离开发介绍的详细解析
2.1 前后台分离开发介绍 在之前的课程中,我们介绍过,前端开发有2种方式:前后台混合开发和前后台分离开发。 前后台混合开发,顾名思义就是前台后台代码混在一起开发,如下图所示:
105 0
|
4月前
|
前端开发 UED
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
中后台前端开发问题之中后台前端开发中的复杂交互问题如何解决
41 0
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
4月前
|
存储 JavaScript 前端开发
不要滥用Pinia和Redux了!多组件之间交互可以手写一个调度器!
【8月更文挑战第24天】不要滥用Pinia和Redux了!多组件之间交互可以手写一个调度器!
79 2
不要滥用Pinia和Redux了!多组件之间交互可以手写一个调度器!
|
4月前
|
开发者 Python
揭秘Django信号的神奇之处:如何解锁异步处理与插件化的秘密武器?
【8月更文挑战第31天】在现代Web开发中,Django信号作为一种强大的机制,支持异步处理与插件化扩展,使开发者能够在不改动现有代码的情况下,在关键事件点插入自定义逻辑。本文详细介绍了Django信号的概念、基本用法及其在异步任务处理与插件开发中的具体应用,展示了如何利用信号监听模型变化并触发相应操作,从而提升应用性能与灵活性,预示着信号机制在未来Web开发中的重要潜力。
31 0
|
5月前
|
SQL 前端开发 API
Laravel框架的主要优点是什么?
【7月更文挑战第2天】Laravel框架的主要优点是什么?
116 0
|
7月前
|
前端开发
如何处理前端应用程序中的异步操作
前端异步操作常见方法包括回调函数、Promise 和 async/await。回调函数可能导致回调地狱,Promise 提供了更好的错误处理和链式调用,而 async/await 则基于 Promise,以同步风格处理异步任务,提高代码可读性。根据需求和喜好选择相应方法,以实现更可靠、易维护的代码。
|
7月前
|
前端开发 JavaScript
js开发中的异步处理
JavaScript中的异步处理包括回调函数、Promise和async/await。回调函数是早期方法,将函数作为参数传递给异步操作并在完成后执行。Promise提供链式处理,通过resolve和reject管理异步操作的成功或失败。async/await基于Promise,允许写更简洁的同步风格代码,通过try-catch处理错误。Promise和async/await是现代推荐的异步处理方式。
|
前端开发
前端学习笔记202307学习笔记第五十九天-react源码-创建任务并存放在任务队列4
前端学习笔记202307学习笔记第五十九天-react源码-创建任务并存放在任务队列4
64 0
|
7月前
|
JavaScript 前端开发 UED
探索 Vue 异步组件的世界:解锁高效开发的秘密(上)
探索 Vue 异步组件的世界:解锁高效开发的秘密(上)

热门文章

最新文章