Question

我使用Laravel和Vue.Now来构建一个多页面应用，例如，假设我想使用一些Laravel辅助函数，例如 {{trans（'messages.welcome'）在Vue组件内部（在一个单独的.vue文件中）..怎么做？

Answer 1

从Blade模板访问Laravel帮助器功能，将结果作为道具传递给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

Answer 2

实际上有一种方法。

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

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

Answer 3

这是做我相信@ rook99的另一种方式

正在努力实现。这对我来说很棒。

在app文件夹中的新文件夹中设置助手功能。称之为FormHelper。添加您的助手功能。


    // 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 App\CustomStuff\FormHelper;
```

在控制器文件的顶部。

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


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

在路线文件夹中设置新路线以调用getHelperFunctions


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

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

将来，只要您想添加Helper函数，只需将新函数添加到FormHelper.php和AppUtilityController.php文件中，然后插入方法即可在Vuejs组件中获取数据。

Answer 4

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

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

然后，您可以在Vue中使用这些js变量。

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

4 个答案: