Question

在过去的几天里，我一直在关注一个非常优秀的youtuber的有关VUE应用程序的教程。当我突然停下来时，我正在按照教程中提到的每个步骤进行操作。这是因为来自我数据库的数据没有显示在前端。该数据库确实表明我已正确存储了数据，并且没有任何错误。我停留的视频是：https://youtu.be/bUXhGw4aQtA

这是控制器中索引的代码

public function index()
    {
        return User::latest()->paginate(10);
    }

这是app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
import {
  Form,
  HasError,
  AlertError
} from 'vform'

window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

import VueRouter from 'vue-router'
Vue.use(VueRouter)

let routes = [{
    path: '/dashboard',
    component: require('./components/Dashboard.vue').default
  },
  {
    path: '/profile',
    component: require('./components/Profile.vue').default
  },
  {
    path: '/users',
    component: require('./components/Users.vue').default
  }
]

const router = new VueRouter({
  mode: 'history',
  routes // short for `routes: routes`
})

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
  el: '#app',
  router
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <div class="container">
           <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Users Table</h3>

                <div class="card-tools">
                    <button class="btn btn-success" data-toggle="modal" data-target="#addNew">Add new <i class="fas fa-user-plus"></i></button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover">
                  <tbody>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Type</th>
                        <th>Registered At</th>
                        <th>Modify</th>
                  </tr>


                  <tr v-for="user in users.data" :key="user.id">


                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.type | upText}}</td>
                    <td>{{user.created_at | myDate}}</td>

                    <td>
                          <a href="#" >
                              <i class="fa fa-edit blue"></i>
                          </a>
                          /
                          <a href="#">
                              <i class="fa fa-trash red"></i>
                          </a>
                      </td>
                    </tr>
                </tbody>
                </table>                  
              </div>
            </div>
            <!-- /.card -->
          </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addNewLabel">Add Users</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button> 
                </div>
                <form @submit.prevent="createUser">
                <div class="modal-body">
                    <div class="form-group">
                      <input v-model="form.name" type="text" name="name"
                        placeholder="Name"
                        class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
                      <has-error :form="form" field="name"></has-error>
                    </div>

                    <div class="form-group">
                      <input v-model="form.email" type="text" name="email"
                        placeholder="email"
                        class="form-control" :class="{ 'is-invalid': form.errors.has('email') }">
                      <has-error :form="form" field="email"></has-error>
                    </div>

                    <div class="form-group">
                      <textarea v-model="form.bio" type="text" name="bio"
                        placeholder="Bio"
                        class="form-control" :class="{ 'is-invalid': form.errors.has('bio') }"></textarea>
                      <has-error :form="form" field="bio"></has-error>
                    </div>

                    <div class="form-group">
                      <select v-model="form.type" type="text" name="type"
                        class="form-control" :class="{ 'is-invalid': form.errors.has('type') }">
                        <option value="">Select user Role</option>
                        <option value="user">Employee</option>
                        <option value="manager">Manager</option>
                      </select>
                      <has-error :form="form" field="name"></has-error>
                    </div>

                    <div class="form-group">
                      <input v-model="form.password" type="password" name="password"
                        placeholder="password"
                        class="form-control" :class="{ 'is-invalid': form.errors.has('password') }">
                      <has-error :form="form" field="password"></has-error>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>

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

<script>
  export default {
    data() {
      return {
        users: {},
        form: new Form({
          name: '',
          email: '',
          password: '',
          type: '',
          bio: '',
          photo: '',
        })
      }
    },
    methods: {
      loadUsers() {
        axios.get("api/user").then(({
          data
        }) => (this.user = data));
      },
      createUser() {
        this.form.post('api/user');
      }
    },
    created() {
      this.loadUsers();
    }
  }
</script>

请让我知道我是否需要其他任何代码来详细说明此处的查询。我尝试了所有我能想到和搜索的选项，但无法使其正常工作。希望另一双眼睛可以帮助我找出问题所在。

我希望有一个完整的表来显示数据库中的所有行，并且前端什么也不显示。（注意：我确实在Chrome的开发人员选项中检查了“网络”标签，并且只有一个xhr类型，并且显示的状态为200）。

Answer 1

您需要将数据作为json返回。您可以使用Laravel [资源] （https://laravel.com/docs/5.8/eloquent-resources）

创建用户资源

php artisan make:resource User

用户控制器

use App\Http\Resources\User as UserResource;

在您的方法上

$user = User::latest()->paginate(10);
return UserResource::collection($user)

Answer 2

我建议您在youtube上搜索laravel / vue教程，那里有大量有用的资源可以为您提供帮助。对于您要实现的目标，如果您已经很好地安装了组件并且可以在浏览器中看到该组件中的虚拟测试，那么您就完成了一半。在安装的Vue组件的挂钩中，对后端（laravel）进行api调用，以获取用户；

axios.get('/get_all_users').then((res)=>{
  this.users = res.data
  //do a console.log(res.data) to ensure you are getting the users collection
}).catch((err) => {
  console.log(err)
});

在您的数据对象内，创建一个空数组，像这样保存用户；

data(){
  return{
    users: []
  }
}

现在，在您的web.php中，为此API调用创建GET路由；

ROUTE::get('/get_all_users', 'UsersController@FetchUsers');

请注意，您的控制器和方法不一定像上面那样命名，创建控制器，然后在内部编写一种方法来获取用户并在此处尽快使用它们；在控制器内部，编写您的方法；

public function FetchUsers(){
  $users = User::latest()->get();
  return response()->json($users, 200);
}

还请注意，您将需要像这样将用户模型导入控制器文件的顶部；

use App\User;

还请确保在此之前已创建与用户表相关的用户模型；到目前为止，如果一切正常，您应该会在浏览器开发人员工具控制台上看到一系列的用户。然后在您的模板中，像这样遍历用户数据；

<tr v-for="user in users" :key="user.id">
  <td>{{ user.id }} </td>
  <td>{{ user.name }} </td>
  <td>{{ user.email }} </td>
  <td>{{ user.created_at }} </td>
</tr>

如果您需要进一步的说明，我们将很乐意为您提供帮助。

该表未显示Laravel Vue组件中来自数据库的数据

2 个答案: