Добрый день.
Изучаю 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.
Простой
Простой