前提・実現したいこと
vue.jsで簡易アプリをしているのですが、
localStorageを呼び出すタイミングが上手くいきません。
発生している問題・エラーメッセージ
下記のコードで、localStorageを呼び出しているつもりなのですが、
データが消えてしまいます。
jsvascript
mounted: function() { this.items = JSON.parse(localStorage.getItem('items')) | []; },
該当のソースコード
html
<div id="app"> <ul v-for="item in items"> <li>{{item.id}}</li> </ul> <p @click="addItem"> クリックで追加 </p> </div>
jsvascript
var vue = new Vue({ el:'#app', data: { items:[ {id:'a',text:'aaa'}, {id:'b',text:'bbb'} ] }, methods: { addItem:function(){ let todo = {id:'c', text:'ccc'} this.items.push(todo) } }, watch: { items: { handler: function() { localStorage.setItem('items', JSON.stringify(this.items)); }, deep: true } }, mounted: function() { this.items = JSON.parse(localStorage.getItem('items')) | []; }, })
試したこと
mountedのタイミングが誤っていると考え、vue.jsのライフサイクルを各種試してみましたが、上手くいきませんでした。
動作確認用として、Githubにファイルをアップロードしました。
githubのURL https://github.com/kondo97/demo.git
動作確認用のURL https://kondo97.github.io/demo/
#その他
お分かりになる方がいらっしゃいましたら、ご教授いただけると大変助かります。
よろしくお願いいたします。
まだ回答がついていません
会員登録して回答してみよう