Question

我正在尝试使用Vuejs和laravel做最简单的帖子，但我一直得到一个＆＃34;错误500＆＃34;还有一个奇怪的＆＃34; Uncaught（in promise）＆＃34;当我在chrome dev工具中查找时出错，所以继承代码。

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

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

希望这可以帮助任何在类似地方发生拼写错误的人！

使用VueJs和Laravel 5发布数据

1 个答案: