Posting data using VueJs and Laravel 5

Question

I am trying to do the most simple post using Vuejs and laravel but I keep getting an "error 500" along with a strange "Uncaught (in promise)" error when I look it up in chrome dev tools, so heres the code.

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>

The VueJs Script

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

The Laravel 5 Routes

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

As described above it does not work, i'm not sure what the server side error is here anyone gots any ideas ^^?

If you are in a development environment, turn on debugging mode (see APP_DEBUG in your .env file); this will cause Laravel to display the full error message in the response. Alternately, look at storage/logs/laravel.log for the error message. — George Cummins
– George Cummins, Commented Dec 1, 2015 at 13:12
@GeorgeCummins, its in debugging mode by default so its on now, and also the laravel log has the error: [2015-12-01 13:41:03] local.ERROR: exception 'Illuminate\Database\Eloquent\MassAssignmentException' with message 'name' in F:\projects\laravel\vue\vendor\laravel\framework\src\Illuminate\Database\Eloquent\Model.php:424 — Kenziiee Flavius
– Kenziiee Flavius, Commented Dec 1, 2015 at 13:44
you're trying to modify a property in App\Message that's marked as guarded: laravel.com/docs/5.1/eloquent#mass-assignment Check the fillable array in App\Message to only allow mass assignment in the properties you need it — edpaez
– edpaez, Commented Dec 1, 2015 at 14:30
wow so i spelt fillable wrong.. i spelt fillabe instead of fillable -_- thanks for telling me or i would have never found that mistake! — Kenziiee Flavius
– Kenziiee Flavius, Commented Dec 1, 2015 at 16:34

Kenziiee Flavius · Accepted Answer · 2015-12-03 08:10:51Z

1

The problem was a simple spelling mistake I put fillabe instead of fillable when setting the parameters for my App\Message Model, Because of this it was returning an error saying that i need to set the variable Fillable.

hope this helps anyone who makes a spelling error in a similar place!

answered Dec 3, 2015 at 8:10

Kenziiee Flavius

1,9475 gold badges30 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Posting data using VueJs and Laravel 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related