我正在尝试使用Vue.js从数据库中获取数据。我创建了组件,路由器遵循每个步骤。但我不知道为什么我的数据无法显示在控制台中并无法在页面上获取。这是我的代码。
AdminComponent.vue:
<template>
<div class=”container”>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
<router-link :to="{ name: 'users' }" class="btn btn-primary">Refresh</router-link>
<table class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Address</th>
<th>DOB</th>
<th>Selected Plan</th>
</tr>
</thead>
<tbody>
<tr v-for = "user in users">
<td>{{user.name}}</td>
<td>{{user.mobile}}</td>
<td>{{user.email}}</td>
<td>{{user.address}}</td>
<td>{{user.dob}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
users: [],
}
},
mounted() {
let uri = '/admin/routes';
this.axios.get(uri).then(response => {
console.log(response.data);
this.users = response.data;
});
}
}
</script>
控制器
public function admin(Request $request)
{
$admin = $request->is_admin;
$users = User::with('subs')->get();
return return response()->json($users);
}
App.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
import App from './App.vue';
Vue.use(VueAxios, axios);
import AdminComponent from './components/AdminComponent.vue';
const routes = [
{
name: 'users',
path: '/admin/routes',
component: AdminComponent
}
];
const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');
web.php
Route::get('/admin/routes', 'HomeController@admin')