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

Posted 2023-02-23

【中文标题】Vue v-使用 Laravel 和 Vuejs 实现无数据显示

【英文标题】：Vue v-for no data display using Laravel and Vuejs

【发布时间】：2019-12-12 13:56:26

【问题描述】：

我使用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();
    

【参考方案1】：

试试这个...

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

【讨论】：

它有效，先生！你能解释一下为什么我的代码不起作用吗？

您能帮我解决我的其他问题吗？我真的需要它。链接在这里。 (***.com/questions/57336689/…)

你有你的v-for="user in users.data" ...。这是undefined，因为当你的axios请求完成时，你将this.users直接分配给一个数组data。为了使 v-for 工作，它需要遍历设置为 this.users 的数组，而不是不存在的 this.users.data

我倾向于不在您使用它的相同组件上获取数据，因为它会导致反应性问题。获取您的数据上一级，并将其作为道具推送到您的组件。这个保险箱可以保护很多加载内容，比如刷新页面

啊。我明白了，先生，这就是为什么它不显示.. 谢谢。先生，您对链接中的第二个问题有其他想法吗？或建议？我是 vue 新手，我很抱歉