Как сделать запрос к контроллеру аяксом?

Question

[Илья Паршаков]

Здравствуйте,
подскажите пожалуйста,
как вытащить данные, через Vue и через него делать запрос к контроллеру laravel аяксом?

Пробую так:
Route

Route::post('/items/', ['uses' => 'ItemController@items']);

ItemController

public function items($cat)
    {
    $items = Item::with([
	    'itemCategory' => function ($query) use ($cat) {
	    $query->where('category', $cat);
	}])->get();
    }

View (blade)

{{ Html::script(mix('/js/app.js')) }}

<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

	new Vue({
    el: '#app',
    data: {
        items: {!! $items !!}
    },
    ready: function (cat)
    {
        this.$http.post('/items/', cat, function (data){
            this.items = data.items;
        }
    }
})
</script>

Comments

[zorca]

items: {!! $items !!} - эмм, эта строчка точно на JS написана??? Консоль наверное разрывается от ошибок.

[Илья Паршаков]

zorca, таким образом пытаюсь передать переменную из laravel

[zorca]

Илья Паршаков, на Ларакасте есть отличный курс стартовый: https://laracasts.com/series/learn-vue-2-step-by-step
Во-первых удобнее пользоваться axios, раз уж мы решили использовать Vue, во-вторых, вы вроде бы правильно все получаете, но в data: забиваются вроде как начальные значения просто, то есть можно туда запихнуть пустоту. А вот сами данные вы получаете в this.items = data.items; Лучше переделать после просмотра курса по VUE 2 и все будет по феншую. Ну и кстати, для API есть отдельные роуты, вы как я понял используете обычные, в web.php.

[Илья Паршаков]

zorca, спасибо огромное!

Answer 1

[Al Sm]

export default {
        data(){
            return{
                items: []
            }
        },

        created: function()
        {
            this.fetchItems();
        },

        methods: {
            fetchItems()
            {
                let uri = '/items/';
                this.axios.post(uri).then((response) => {
                    this.items = response.data;
            });
            }
        }
    }