无法使用 Vue.js 和 Laravel 将模型绑定到输入答案

【问题标题】：Not able to bind a model to an input using Vue.js and Laravel无法使用 Vue.js 和 Laravel 将模型绑定到输入
【发布时间】：2017-11-18 14:00:10
【问题描述】：

我已经习惯了 Vue.js，但似乎偶然发现了这里的基础知识......
我使用包含 Vue.js 的 Laravel 5.4，所以我在我的视图中得到了这段代码：

<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>

但无论我做什么，我总是得到

app.js:19558 [Vue 警告]：属性或方法“rememberme”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。

所以我查看了谷歌并查看了一些在线教程，但我仍然遇到了这个问题。
在我的布局中，我在脚本部分之前加载了 app.js，所以 Vue.js 实际上就在那里。

【问题讨论】：

您的代码应该可以工作。 jsfiddle.net/fL4bdzd5“我已经在脚本部分之前加载了app.js”是什么意思？
嘿嘿，我的状态是“它应该可以工作 - 为什么它不工作！？” ;) 我的意思是我的布局文件在 scripttag 之前加载已编译的 app.js（包括 vue）。
嗯，你的帖子中一定有一些东西没有包括在内。你的代码和我分享的小提琴有什么不同？
我在这里上传了完整的 HTML：pastebin.com/EDqpKZrZ
我假设您的 http://moya.local/js/app.js 文件包含绑定到 #app div 的 Vue 实例？

标签： laravel laravel-5 vue.js vuejs2

【解决方案1】：

从您分享的pastebin 中，您可以看到您已经有一个脚本app.js，其中包含一个Vue 实例，根#app div 作为绑定到该实例的元素。

正因为如此，第一个 Vue 实例在 #app div 中看到了 rememberme 属性，但它本身没有 rememberme 属性，因此它会向您发出警告。

只需将rememberme 属性添加到app.js 脚本中的Vue 实例即可：

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

【讨论】：