Передача данных из Laravel Blade в компонент Vue - PullRequest
Новая
       12

Передача данных из Laravel Blade в компонент Vue

0 голосов
/ 06 июня 2018

Я передаю данные из моего Laravel Blade в компонент Vue.Вопрос может на самом деле применяться к любой переменной, переданной из моего файла шаблона blade-сервера компоненту Vue.

В этом примере я передаю переменную перевода.Я знаю, что есть переводческие пакеты для перевода языковых файлов в формат json, и оттуда импортирую их в мой компонент - у меня это есть, и оно работает.Мой вопрос скорее о передаче переменной от блейда к Vue.

Все, что у меня есть, работает - я просто хочу знать, каким был бы "правильный путь".

Так что в моем блейдефайл, который у меня есть; 

<my-component :myvariable="'{{ trans('app.test_translation') }}'"></my-component>

В моем компоненте у меня есть 

props: {
    myvariable: String,
},

И в моем шаблоне компонента у меня есть значок 

<i class="fa fa-info-circle" :title="myvariable"></i>

В результате, еслиПри наведении курсора на значок я получаю ожидаемый результат.

Будет ли это правильный путь для достижения того, чего я хочу достичь?

Альтернативный метод, который я могу применить, - определить переменнуюв моем контроллере, например, 

$myvariable = trans('app.test_translation');

Затем передайте переменную в мой блейд-файл 

compact('myvariable')

И из моего блейд-файла в мой компонент Vue 

<my-component :myvariable="'{{ $myvariable }}'"></my-component>

Я хочу воздерживаться от многословных вещей, и я хочу воздерживаться от выполнения вещей, которые «просто работают» - я пытаюсь сделать «правильный» путь.

Или есть другой метод или предложение?

Или я должен придерживаться пакета Lang.js, определяя LanПеременная g и импорт сообщений (переводов) в каждый компонент как таковой? 

window.Lang = require('lang.js');
const Lang = new window.Lang({
    messages
});
import messages from '../vue-translations.js';

Я определил последний в своем файле app.js - но всегда хочу использовать один или несколько переводов вVue компонент, я должен импортировать все переводы, как в предыдущем примере выше.

Буду признателен за ваш вклад!

Спасибо.

...