laravel axios vue.js / 连接数据库时出错答案

【问题标题】：laravel axios vue.js / Error to connect to databaselaravel axios vue.js / 连接数据库时出错
【发布时间】：2017-09-06 14:49:21
【问题描述】：

（我编辑了我的代码，它正在工作！）

我正在尝试让我的数据库对象与 Vue 和 Laravel 一起使用。

我的 data.blade.php :slight_smile:

<!DOCTYPE html>
<html>
<head>
    <title> Tab test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">
</head>

<body>
    <div id="app">
        <users></users>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="/js/customers.js"></script>
</html>

我的客户.js

Vue.component('users',{
    template : `
        <table class="users">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Creation Data</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users">
                    <th>{{ user.id }}</th>
                    <th>{{ user.lastname }}</th>
                    <th>{{ user.email }}</th>
                    <th>{{ user.created_at }}</th>
                </tr>
            </tbody>
        </table>
    `,
    data: function() {
        return {
            users: []
        }
    },
    created: function() {
        this.getUsers();
    },
          methods: {
                    getUsers: function(){


                        axios.get("/apps").then((response) => {this.apps = response.data})
    }
                    }

}),
new Vue({
    el: '#app',


});

还有我的 api.php

Route::get('/users', function(){
    return App\User::all();
})->name('api_users');

我的错误是：

enter image description here

你有什么想法吗？我认为这是 axios 的问题，但我不知道如何解决。 ?

感谢任何想法或解决方案:)

【问题讨论】：

axios.get("{{route('api_users') }}") 是你的问题。您需要传递您希望axios 发出请求的实际网址

标签： laravel vue.js axios

【解决方案1】：

{{route('api_users') }} 是一个刀片函数，不能在您的.js 文件中使用。

你可以：

在您的 javascript 文件中硬编码 URL /users
将路由绑定到刀片中的前端并通过那里访问它
等

【讨论】：

感谢您这么快回复！像这样： axios.get("/customers/list/data") .then(response => {this.users = response.data.users}) } ?
根据您的路线api_users 是/users 而不是/customers/list/data，但这是一般的想法是的
试试axios.get("/users")
我试过了，但它什么也没说，但没有错误。它不再删除 Vue.js。
试试this.users = response.data