無法使用Vue.js和Laravel將輸入的模型綁定到輸入

我已經習慣了Vue.js，但似乎無意中發現了這裏的基礎知識......
我使用的Laravel 5.4包含Vue.js ，所以我得到這個代碼在我看來：無法使用Vue.js和Laravel將輸入的模型綁定到輸入

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

但無論我做什麼，我總是得到

應用.js：19558 [Vue warn]：屬性或方法「rememberme」沒有在實例上定義，但在渲染過程中被引用。確保在數據選項中聲明反應數據屬性。

所以我正在檢查谷歌和審查一些在線教程，但我仍然有這個問題。
在我的佈局中，我已經在腳本部分之前加載了app.js，所以Vue.js實際上就在那裏。

來源

2017-06-15 Husky110

您的代碼應該工作。 https://jsfiddle.net/fL4bdzd5/你是什麼意思「我已經在腳本部分之前加載了app.js」？ – thanksd

Heyho，以及我在狀態「它應該工作 - 爲什麼它不工作！？」 ;）我的意思是我的佈局文件在scripttag之前加載了編譯好的app.js（包括vue）。 – Husky110

那麼，你的帖子中一定有一些你不包括在內。你的代碼與我共享的小提琴有什麼不同？ – thanksd

從您共享的pastebin中，可以看到您已經有一個腳本app.js，其中包含一個Vue實例，其根目錄#app div作爲綁定到該實例的元素。

因此，第一個Vue實例在#app div內看到rememberme屬性，但它本身沒有rememberme屬性，所以它給了你這個警告。

就在rememberme屬性添加到Vue的實例在app.js腳本：

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

來源

2017-06-15 23:50:22 thanksd

無法使用Vue.js和Laravel將輸入的模型綁定到輸入

回答

相關問題