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

Question

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.

Your code should work. jsfiddle.net/fL4bdzd5 What do you mean "I've loaded the app.js before the script-section"? — thanksd
– thanksd, Commented Jun 15, 2017 at 23:18
Heyho, well I'm on the state "it should work - why the heck isn't it working!?" ;) I mean that my layouts-file loads the compiled app.js (which include vue) before the scripttag. — Husky110
– Husky110, Commented Jun 15, 2017 at 23:21
Well, there must be something you're not including in your post. How is your code different from the fiddle I shared? — thanksd
– thanksd, Commented Jun 15, 2017 at 23:23
I'm assuming your http://moya.local/js/app.js file contains a Vue instance bound to the #app div? — thanksd
– thanksd, Commented Jun 15, 2017 at 23:27

thanksd · Accepted Answer · 2017-06-15 23:50:22Z

1

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

answered Jun 15, 2017 at 23:50

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

Collectives™ on Stack Overflow

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

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