Vue v-使用 Laravel 和 Vuejs 实现无数据显示

Question

我使用v-for 和axios 来显示数据，但是当我运行我的网站时，数据不会显示，但是在控制台和我的 vue 开发人员工具中没有错误，我可以看到其中的数据。有人可以帮我吗？

用户.vue

 <table id="table" class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Name</th>
                          <th>Email</th>
                          <th>Type</th>
                          <th>Created</th>

                        </tr>
                      </thead>
                      <tbody>
                    <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}}</td>
                        <td>{{user.created_at}}</td>
                        </tr>
                      </tbody>
    </table>

script>
    export default {
       data() {
    return {

      users: {},
      form: new Form({
        id:'',
        name: "",
        email: "",
        password: "",
        type: "",
      })
    };
  },
  methods: {
      loadUsers(){
           axios.get("api/user").then(({ data }) => (this.users = data));
      }
  },
    created() {
            console.log('Component mounted.')
            this.loadUsers()

        }
    }

</script>

api.php

Route::apiResource('user', 'API\UserController');

用户控制器.php

<?php

namespace App\Http\Controllers\API;


use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return User::all();
    }

}

Answer 1

试试这个...

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