php - 从 laravel 控制器接收的数据未更新为 vue 变量
问题描述
我正在使用 laravel 和 vue 创建一个具有仪表板的 Web 应用程序。当我将数据从控制器传递到 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 变量时,未设置数据。
我的输出是这样的: 这是输出图像文件
请检查并提前谢谢...
解决方案
这永远不是打印项目数组,因为它在 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>
这可以帮助你。祝你好运。
推荐阅读
- java - 如何编写多正则表达式行?
- javascript - 如何调用函数作为参数,我试过这个不起作用?
- sql - 日夜段中按日期划分的 SQL 数据
- javascript - 快递中req和res的类型?
- c++ - 返回地址上的 WriteProcessMemory
- c++ - 错误 C2059:语法错误:结构成员声明中的“常量”
- javascript - 在 response.data [NodeJS, Axios, VueJS] 中获取 HTML 而不是 JSON
- python - 我的飓风追踪器代码不起作用
- postgresql - 更改 Postgres 域的检查约束
- node.js - 来自 React 的 HTTP 请求未到达生产服务器上的 Express 后端