javascript - 表未显示 laravel vue 组件中数据库的数据

Question

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

这是我的 Controller 中索引的代码

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

我建议你去 youtube 搜索 laravel/vue 教程，那里有大量的好资源可以帮助你。 对于您想要实现的目标，如果您已经很好地安装了组件并且可以在浏览器上的组件中看到虚拟测试，那么您就完成了一半。 在 vue 组件的已安装钩子(Hook)内，对后端 (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');

请注意，您的 Controller 和方法不一定是上面的名称，创建一个 Controller ，并在里面编写一个方法来获取用户并尽快在此处使用它们； 在你的 Controller 中，编写你的方法；

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

另请注意，您需要在 Controller 文件的顶部导入用户模型，如下所示；

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>

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