尝试将翻译键值的 json 从 laravel 刀片传递到 vue.js 时出现问题

Posted

技术标签:

【中文标题】尝试将翻译键值的 json 从 laravel 刀片传递到 vue.js 时出现问题【英文标题】:Issue while trying to pass json of translation key-value from laravel blade to vue.js 【发布时间】:2019-09-10 16:30:39 【问题描述】:

这是我的翻译文件

return [
    "Key1" =>  "Message 1",
    "Key2" => "Message 2",
    "Key3" => "Message 3",
    "Key4" => "Message 4",
    "Key5" => "Message 5",
    "Key6" => "Message 6",
    "Key7" => "Message 7",
    "Key8" => "Message 8",
];

这是 Laravel Blade 中的代码

<profile
    v-bind:ErrorMessages= "                            
    Messages: '!! json_encode(Lang::get('Profile')) !!'
">                                
</profile>

在上面的组件中,我试图将完整的翻译文件从 laravel Blade 传递给 Vue.js

但是,上面的代码打印了网页中的所有键,打乱了整个布局。

我是否遗漏了以正确格式将 json 从 laravel 传递到 Vue.js 的任何内容

更新 1

我可以使用以下代码将对象从 laravel 传递给 vue.js。但下面更像是手动输入文件的每个翻译键。

<profile
    v-bind:messages= "                            
    Key1: '!! trans('Profile.Key1') !!',
    Key2: '!! trans('Profile.Key2') !!',
    Key3: '!! trans('Profile.Key3') !!',
    Key4: '!! trans('Profile.Key4') !!',
    Key5: '!! trans('Profile.Key5') !!',
    Key6: '!! trans('Profile.Key6') !!',
    Key7: '!! trans('Profile.Key7') !!',
    Key8: '!! trans('Profile.Key8') !!'
">                                
</profile>

【问题讨论】:

【参考方案1】:

看来你需要传递一个对象给 :messages

我对 Laravel 不是很熟悉,请尝试以下选项:

<profile messages='!! json_encode(Lang::get("Profile")) !!'></profile>

<profile :messages="!! json_encode(Lang::get('Profile')) !!"></profile>

【讨论】:

【参考方案2】:

试试这个:

<profile
    v-bind:ErrorMessages= "'!! json_encode(Lang::get('Profile')) !!'">                                
</profile>

注意" 之间的额外' - 这样你就可以将你想要的字符串作为字符串传递。

【讨论】:

以上是关于尝试将翻译键值的 json 从 laravel 刀片传递到 vue.js 时出现问题的主要内容,如果未能解决你的问题,请参考以下文章

json字段中键值的核心数据

从具有不同值的逗号分隔 JSON 对象填充 html 下拉列表

如何在laravel刀片中从json解码中回显键名和键值

如何从 JSON 对象中获取特定的键值

尝试从 Angular 5 中的 JSON 递归获取键值

60 无键值Json数组和有键值json数组实验