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

Question

（我编辑了我的代码，它正在运行！）

我正在尝试让我的数据库对象与 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>

我的customers.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的问题，但我不知道如何解决。？

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

Answer 1

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

你可以：

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

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

laravel axios vue.js / Error to connect to database

laravel

vue.js

axios