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

Я создаю веб-приложение с приборной панелью, используя 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, данные не устанавливаются.

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

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

0

Решение

Это никогда не массив print items, потому что он выполняется до заполнения ответа 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"></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>

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

0

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector