使用 VueJs 和 Laravel 5 发布数据答案

【问题标题】：Posting data using VueJs and Laravel 5使用 VueJs 和 Laravel 5 发布数据
【发布时间】：2016-03-05 09:03:51
【问题描述】：

我正在尝试使用 Vuejs 和 laravel 做最简单的帖子，但是当我在 chrome 开发工具中查找它时，我不断收到“错误 500”以及奇怪的“未捕获（承诺中）”错误，所以这里是代码。

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());
});

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

【问题讨论】：

如果你在开发环境中，打开调试模式（见.env文件中的APP_DEBUG）；这将导致 Laravel 在响应中显示完整的错误消息。或者，查看 storage/logs/laravel.log 中的错误消息。
@GeorgeCummins，它默认处于调试模式，所以它现在打开了，而且 laravel 日志也有错误：[2015-12-01 13:41:03] local.ERROR: exception 'Illuminate \Database\Eloquent\MassAssignmentException' 带有消息'name' 在 F:\projects\laravel\vue\vendor\laravel\framework\src\Illuminate\Database\Eloquent\Model.php:424
您正在尝试修改App\Message 中标记为guarded 的属性：laravel.com/docs/5.1/eloquent#mass-assignment 检查fillable 中的fillable 数组App\Message 仅允许在您需要的属性中进行质量分配它
哇，所以我拼错了 fillable.. 我拼写了 fillabe 而不是 fillable -_- 谢谢你告诉我，否则我永远不会发现那个错误！
请出示 App\Message 型号代码

标签： post laravel-5 vue.js

【解决方案1】：

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

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

【讨论】：