如何在 Vue 中使用 Laravel 辅助函数？答案

【问题标题】：How to use Laravel helper functions with Vue?如何在 Vue 中使用 Laravel 辅助函数？
【发布时间】：2018-07-08 00:13:28
【问题描述】：

我正在使用 Laravel 和 Vue 构建一个多页应用程序。现在，例如，假设我想在 Vue 组件（位于单独的.vue 文件）.. 怎么做？

【问题讨论】：

laravel (PHP) 是服务端，不能直接用在javascript中，可以在vuejs中创建自己的trans()函数，导入json格式的翻译
正如@IlyaYaremchuk 正确所说，它不可能在 VueJS 中使用它们。如果你的问题是关于如何翻译你的前端，我会无耻地宣传我关于这个主题的博客文章medium.com/@konafets/…
@btl 问题是关于在 Vue 组件 inside 中使用 Laravel 帮助程序 ;-) 当然，您下面的答案是否有效，但是您想传递多少道具给组件？
@常识：我明白了。您在博客文章中提到了内联模板，这对我来说是完美的……但是内联模板不被认为不是最佳实践吗？
我在某处也读到过，但从未读过它为什么这么认为的原因。但是由于它是 VueJS 的一个可用特性并且它符合您的需求，所以只需使用它 :-)

标签： laravel laravel-5 vue.js

【解决方案1】：

其实是有办法的。

内部数据我用 php 标签调用了 Laravel 辅助方法。代码：

<script>
let app = new Vue({
            el: '#app',
            data: {
                app_url: "<?php echo app_url(); ?>"
            });
</script>

【讨论】：

【解决方案2】：

这是我认为@rook99 的另一种方法

正在努力完成。这对我很有用。

在 app 文件夹的新文件夹中设置您的 Helper Functions。我在名为 CustomStuff 的 app 文件夹中创建了一个新文件夹。然后我设置了一个名为 FormHelper.php 的文件。将您的 Helper 函数添加到此文件中。这是 Helper 函数文件的路径：app\CustomStuff\FormHelper.php


    // This is my Helper Function. Create an array of states
    public static function States()
    {
        $states =['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA',
        'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MH', 'MD', 'MA', 'MI', 
        'MN', 'MS','MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 
        'OK', 'OR','PA', 'PR', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 
        'WV', 'WI', 'WY',];
        return $states;
    }

设置一个新的控制器。在控制器文件夹中。称它为 AppUtilityController 不要忘记添加
```
    use FormHelper;
```

在控制器文件的顶部。命令行中的以下命令将创建控制器。

php artisan make:controller AppUtilityController

在 AppUtilityController 中添加要从根调用的函数并返回 Helper 函数数据。


    public function getHelperFunctions()
    {
        $data['states'] = FormHelper::States();
        return $data;
    }

在你的路由文件夹中设置一个新路由来调用 getHelperFunctions


    Route::get('/app-utilities/get-helper-functions', 
        'Admin\AppUtilityController@getHelperFunctions');

接下来转到需要帮助函数的 Vuejs 组件。使用 created 方法设置一个函数，以便在加载组件时调用该函数。
让函数向路由中的 url 发出 api 请求。这将是app-utilities/get-helper-functions。我正在使用 axios 提出请求。 FormHelper 函数将作为 javascript 对象返回。只需在组件中的任何位置使用该对象即可。

以后，每当你想添加 Helper 函数时，只需将新函数添加到 FormHelper.php 和 AppUtilityController.php 文件中，然后在你的 Vuejs 组件中插入获取数据的方法。

我写了一篇关于这个主题的博客 [post]：https://david.dukesnuz.com/blog/8/how-to-use-laravel-helper-functions-with-vuejs。

【讨论】：

【解决方案3】：

从 Blade 模板访问 Laravel 辅助函数，将 result 作为道具传递给 Vue 组件：

// app.blade.php
<message-component :message="{{ trans('messages.welcome') }}"></message-component>

// MessageComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: [ 'message' ],
}
</script

【讨论】：

【解决方案4】：

只需将脚本添加到刀片模板中：

<script>
    window.laravel_helper_result1 = '{{laravel_helper_function_1()}}';
    window.laravel_helper_result2 = @json(laravel_helper_function_2());
</script>

然后你就可以在你的Vue中使用这些js变量了。

【讨论】：