Laravel & amp; Определение переменной VueJS
Я решил создать небольшой проект с использованием Laravel 5.1, vueJS (с vue-resource) и некоторого взаимодействия с файлами на стороне сервера.
Все работает нормально, но в процессе создания приложения я спросил себя, каков наилучший способ получения данных с сервера. Помимо очевидного решения, AJAX, я попытался записать данные с помощью laravel-blade внутри объекта данных моего экземпляра Vue, который выглядел так:
FileController.php:
$files = Auth::user()->files;
return view('files.index', compact('files'));
Функция files () представляет собой простое отношение ownToMany () в пользовательской модели с сводной таблицей в фоновом режиме.
index.blade.php:
new Vue({
el: '#files',
data: {
// pass the data to Vue via PHP so you don't need an AJAX request
files: {!! $files !!}
// ..
}
Другое решение будет примерно таким в моем экземпляре Vue:
ready: function() {
this.$http.get('/todos', function (data) {
this.$set('todos', data);
}).error(function (data) {
console.log(data);
});
Теперь мой вопрос: есть ли у моего подхода какие-либо недостатки, потому что, на мой взгляд, он лучше, потому что он меньше взаимодействует с AJAX, и это означает, что приложение должно быть быстрее (по крайней мере, в теории).
Изменить: конечно, можно просто написать это, например, с помощью блейд-foreach, но я хочу сделать представление данных в vue.
Решение
Вы можете получить данные, используя реквизит:
<div id="files" :files="{{ $files }}"></div>
И в твоем Vue пример:
new Vue({
el: "#files",
props: ['files'],
data: {
list: []
},
ready: {
this.list = JSON.parse(this.files)
}
});
Опция реквизита files заполнен $files от laravelи анализируется json использовать в vue, после варианта готовности, вы можете использовать в HTML:
<div v-for="l in list">
@{{ l.name }}
@{{ l.last_name }}
</div>
Список содержит json с файлами, которые поступают из Laravel контроллер.
Другие решения
Тебе нужно реквизит
Так что ваш элемент будет выглядеть так:
<div id="#files" :files="{!! $files !!}"></div>
И ваше Vue:
new Vue({
el: '#files',
props: {
files: {
type: Object // <- not necessary, you can also have props: ['files']
}
}
});