Issue while trying to pass json of translation key-value from laravel blade to vue.js

Question

This is my translation file

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",
];

This is the code in Laravel Blade

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

In the above component, I am trying to pass the complete translation file from laravel blade to Vue.js

But, the above code print all keys in the web page and disturbs the whole layout.

Am I missing anything to pass the json in correct format from laravel to Vue.js

Update 1

I am able to pass the object from laravel to vue.js using below code. But below is more like manual work typing each translation key of a file one by one.

<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>

Tarasovych · Accepted Answer · 2019-04-29T22:06:59.597

5

Try this:

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

Note about additional ' between " and { - so you'll pass what you want as string.

edited Apr 29 '19 at 22:06

answered Apr 23 '19 at 09:55

Tarasovych

2,228
3
19
51

score 0 · Answer 2 · answered Apr 23 '19 at 04:15

It seems that you need to pass an object to :messages

I'm not very familiar with Laravel, please try following option:

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

or

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

Issue while trying to pass json of translation key-value from laravel blade to vue.js

Update 1

2 Answers2

Linked