Vue.js 中的 Laravel 类访问

Question

我有以下类，我在其中定义了我的最小/最大长度值:

class MinMaxValuesUser {
    const Min_UserName = 6;
    const Max_UserName = 30;
}

下面是请求类中的规则，其中使用最小最大值而不是对其进行硬编码。

public function messages() {
    return [

        "Min_UserName.min" =>  trans("Profile.Min_UserName"),
        "Max_UserName.max" =>  trans("Profile.Max_UserName")
    ];
}

public function rules() {

    return [
        "UserName" =>  "min:" . MinMaxValuesUser::Min_UserName 
                          . "|max:" . MinMaxValuesUser::Max_UserName
    ];
}

下面是我使用相同服务器端类的 JQuery 验证代码。

$('form#frmProfile').validate({
    rules: {
        UserName: {
            minlength: {!! \App\MinMaxValues\MinMaxValuesUser::Min_UserName !!},
            maxlength: {!! \App\MinMaxValues\MinMaxValuesUser::Max_UserName !!}
        }
    }
});

问题

因为我写了很多代码，所以我开始使用已经嵌入到 Laravel 中的 Vue.js。这里的一切都很好

但正如我们所知，vue.js 是一个前端框架并在客户端加载，因此将无法使用上述服务器端类来保持最小最大数字集中。

请建议如何解决这个问题。

Answer 1

像这样将您的用户配置放在/config/user.php 文件中

<?php

return [
  'Min_UserName' => 4,
  'Max_UserName' => 10
];

你现在可以像这样在你的 php 中的任何地方访问它

config('user.Min_userName'); // specific value
config('user'); // array of both values

你可以像这样把它放到你的 View 文件中:

@json(config('user'))

如果您的 View 组件是在 Blade 文件中定义的，您可以将其放入您的数据定义中:

'user_requirements': @json(config('user'))

如果您的 vue 组件进一步隐藏在 js 文件中，那么您需要像这样在 blade 模板(可能是您的布局)中定义一个 js 变量

let MyUserReqs = @json('user');

然后您可以使用 js 变量 MyUserReqs 在您的 vue 组件中定义它。