Laravel vue 数据不显示在 vue 组件中答案

【问题标题】：Laravel vue data is not displayed in vue componentLaravel vue 数据不显示在 vue 组件中
【发布时间】：2021-05-13 21:55:48
【问题描述】：

我希望显示来自我的 API 请求的数据，但它似乎有问题，我无法弄清楚它是什么……当我尝试循环时，数据没有显示在页面上。我通过邮递员从 API 获取数据。如果有什么没有正确解释，请写一些东西......

这是我的 api.php Route::get('/user', 'Api\UserController@index');

这是 Api\UserController：

public function index()
    {
        return UsersResource::collection(User::all());
    }

这是 vue 脚本：

<script>
    export default {
        data: function () {
            return {
                users: [],
            }
        },
        mounted() {
            this.loadUsers();
        },
        methods: {
            loadUsers: function () {
                axios.get('api/user')
                    .then((response) => {
                        this.users= response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }
        }
    }
</script>

这是我试图将数据放入的表格：

 <table >
          <tr>
          <th>
          <div class="form-text">
            TOP 10 USERS
          </div>
          </th>
          <th>RATING</th>
          <th>DEAL</th>
          <th>LINK</th>
          </tr>
          <tr v-for="user in users" :key="user.id">
          <td class="text-white">
              {{user.name}}
          </td>
          <td>/5</td>
          <td>% Discount</td>
          <td>
              <button class="btn buttonGlowGreen">VISIT</button>
         </td>
     </tr>
 </table>

【问题讨论】：

请添加console.log(response.data.data);在 this.users=response.data.data 之前；告诉我你在控制台中得到了什么？
我完美获取数据
打开您的 vue 控制台，在数据下方的组件选项卡中，您是否看到拥有该数据的用户？
不，我在那里没有看到任何数据。

标签： laravel vue.js

【解决方案1】：

在您的 loadUser 方法中，您通过 response 关键字获得响应，那么您必须在 vue 中为您的用户对象进行设置。

所以将this.users= users.data.data; 替换为this.users= response.data.data;

methods: {
    loadUsers() {
        axios.get('api/user')
            .then((response) => {
                this.users= response.data.data;
            })
            .catch(function (error) {
                console.log(error);
            })
        }
    }
}

【讨论】：

很抱歉这是 this.users= response.data.data;这是我的错。即使它也不起作用。

【解决方案2】：

设法通过删除来修复它

<script src="{{mix('js/app.js')}}"></script>

这是我的

<div id="app">.

来自我的刀片页面。现在一切正常！

【讨论】：