CODEWITHSUNDEEP
laravellaravel-5vue.jsvuejs2
Husky110
Husky110

Reputation: 741

Not able to bind a model to an input using Vue.js and Laravel

I'm getting used to Vue.js but seem to stumble on the basics here...
I use Laravel 5.4 which has Vue.js included, so I got this code in my view:

<form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}" id="loginform">
<div class="field columns">
    <p class="control column is-half">
        <a class="button is-success is-fullwidth">Login</a>
    </p>
    <p class="control column is-half">
        <input type="text" v-model="rememberme" name="remember">
        <a class="button is-light is-fullwidth"><span class="fa fa-square-o fa-vertical-middle fa-has-margin fa-force-1rem"></span>Remember me</a>
    </p>
</div>


<script>
    new Vue({
        el:'#loginform',
        data: {
            rememberme: 1
        }
    });
</script>

But no matter what I do, I always get

app.js:19558 [Vue warn]: Property or method "rememberme" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

So I was checking google and reviewed some online tutorials, but I still got that problem.
In my layout I've loaded the app.js before the script-section, so Vue.js is actually there.

Upvotes: 0

Views: 444

Answers (1)

thanksd
thanksd

Reputation: 55644

From the pastebin you shared, you can see that you already have a script app.js which contains a Vue instance with the root #app div as the element bound to the instance.

Because of this, that first Vue instance is seeing the rememberme property within the #app div, but doesn't have a rememberme property itself, so it's giving you that warning.

Just add the rememberme property to the Vue instance in the app.js script:

const app = new Vue({
   el: '#app',
   data: {
     rememberme: 1
   }
});

Upvotes: 1

Related Questions