使用 VueJs 和 Laravel 5 发布数据

Question

我正在尝试使用 Vuejs 和 laravel 做最简单的 post，但是当我查看它时，我不断收到 "error 500" 以及一个奇怪的 "Uncaught (in promise)" 错误在 chrome 开发工具中，这是代码。

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="token" id="token" value="{{ csrf_token() }}">
    <title>Guestbook</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>

<div id="chatbox">
    <div class="container">
        <div class="row">
            <form method="POST" v-on:submit="sendMessage">
                <h1 v-if="nameIsSet">@{{ userInfo.name }}</h1>
                <input type="text" placeholder="Name" v-model="userInfo.name" v-if="! nameIsSet"><button v-if="! nameIsSet" class="btn btn-info" v-on:click="setName">Set Name</button>
                <br>
                <input type="text" placeholder="Message" v-if="nameIsSet" v-model="userInfo.message"><button v-if="nameIsSet">Send Message</button>
                {{ csrf_field() }}
            </form>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<script src="js/view-resource.min.js"></script>
<script src="js/guestbook.js"></script>
</body>
</html>

VueJs 脚本

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({
    el: '#chatbox',
    data:{
        userInfo:{
            name: '',
            message: ''
        },
        nameIsSet: false
    },
    methods:{
        setName: function(){
            this.nameIsSet = true;
        },
        sendMessage: function(e){
            e.preventDefault();
            console.log(userInfo);
            var userInfo = this.userInfo;
            this.$http.post('api/messages', userInfo);
        }
    }
})

Laravel 5 路线

Route::get('/', function(){
    return view('guestbook');
});

//API

Route::get('api/messages', function(){
    return App\Message::all();
});

Route::post('api/messages', function(){
    App\Message::create(Request::all());
});

如上所述它不起作用，我不确定这里的服务器端错误是什么任何人有任何想法^^？

Answer 1

问题是一个简单的拼写错误，我在为我的 App\Message 模型设置参数时用 fillabe 而不是 fillable，因此它返回了一个错误，说我需要设置变量Fillable.

希望这对在类似地方出现拼写错误的任何人有所帮助！

使用 VueJs 和 Laravel 5 发布数据

Posting data using VueJs and Laravel 5

post

vue.js

laravel-5