Nemozar
@Nemozar
Php developer

Возможно ли на сервере рендерить шаблон blade с vue?

Добрый день.
Изучаю Laravel и параллельно хочу изучить vuejs. Про rest api бэкенд на ларавеле и отдельный фронтенд на vuejs пока не хочу заморачиваться (хотя это идеологически правильно).

Как я для себя сейчас вижу интеграцию vue в шаблоны:

1. Есть шаблоны blade которые на сервере рендерятся из данных на контроллере.
2. Данные передаются и рисуются чистым html + vuejs. Т.е. на каждой странице в шаблоне стоит инициализация vue, но для соблюдения реактивности необходимо передавать сразу массив data при инициализации vue.

В чем вопрос. У меня есть отдельная вьюшка, которая содержит v-for для вывода списка. Т.к. данные переданы из контроллера в эту вьюшку хочется сразу их сделать реактивными.

Такой пример кода работает, но не добавляет реактивности (только позволяет пользоваться vue как шаблонизатором)

<div>
        <div v-for="item in @json($itemList)">
            @{{item.label}}
        </div>
</div>


Нашел способ чтобы добиться реактивности, но выглядит достаточно коряво:

Вьюшка на blade
@section('content')
    <div>
        <div v-for="item in menulist">
            @{{item.label}}
        </div>
    </div>
    {{$md}}
@endsection

@section('vuedata')
    Vue.set(data, 'menulist', [{label:1}, {label:1}]);
@endsection


В главном шаблоне:
<script>
        var data = {};
        var vm = new Vue({ el: '#app',
            data: data
        });

        @yield('vuedata')
    </script>


Вопрос как все же правильно решить мою задачу. Просьба не говорить что подход не верный и надо использовать rest api на ларавеле и отдельный фронтенд на Vue, т.к. это следующий шаг. Сейчас у меня цель изучить Laravel в полном объеме с шабонизатором blade.
  • Вопрос задан
  • 479 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы