данные, полученные от контроллера laravel, не обновляются до переменной vue

Question

Я создаю веб-приложение с панелью управления, используя laravel и vue.Когда я передаю данные из контроллера в vue файл, данные принимаются правильно, но когда я устанавливаю их в переменную vue, значение не устанавливается в переменной.Все данные получены и отображаются в консоли, но когда я устанавливаю их в переменную vue, переменная не обновляет свое значение.Это мой класс контроллера:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
    //
    public function index()
    {
        $users=User::all();

        return response()->json($users);
    }
}

Это myTeam.vue для получения и отображения данных:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>


                    <h1>
                       This request list
                       Hello,{{this.items}}
                    </h1>

                    <ul class="list-group">
                        <li class="list-group-item" v-for="t in items">{{items}}</li>

                    </ul>

                      </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        data(){
            return {
                 //items: []
                 items:[],

            }
        },

        created() {
            var self=this;
             axios.get('/allusers').then((response) => self.items=response.data) .catch((error)=>console.log(error));

             axios.get('/allusers') .then(response => console.log(response.data));

            console.log('Component mounted.'+this.items)
        },


    }
</script>

Теперь, когда я запускаю его, консоль правильно печатает массив, значит данныеполучено, но когда я устанавливаю его в переменную items, данные не устанавливаются.

Мой вывод такой: Это файл выходного изображения

Пожалуйста, проверьте его, и спасибо заранее ...

Answer 1

Это никогда не массив элементов вывода, потому что он выполняется до того, как ответ ajax заполнен.

    console.log('Component mounted.'+this.items)

Вот почему ваша консоль всегда пуста.Вы можете искать блокирующее и неблокирующее программирование.

ваш код содержит небольшую ошибку.Обновите свой код и попробуйте это:

<h1>
 This request list
    Hello,{{items}}
</h1>

<ul class="list-group">
    <li class="list-group-item" v-for="t in items">{{t}}</li>
</ul>
...

<script>
    export default {
        data(){
            return {
                items:[],
            }
        },
        mounted: function () {
            this.getList();
        }

        methods: {
            let _this = this;
            axios.get('/allusers')
            .then((response) => _this.items = response.data) 
            .catch((error)=>console.log(error));
        },
    }
</script>

Это может помочь вам.Удачи.