問題点
vue.jsで簡易アプリをしているのですが、localStorageを呼び出すタイミングが上手くいきません。
エラー箇所
下記のコードで、localStorageを呼び出しているつもりなのですが、データが消えてしまいます。
mounted: function() {
this.items = JSON.parse(localStorage.getItem('items')) || [];
},
該当のソースコード
<div id="app">
<ul v-for="item in items">
<li>{{item.id}}</li>
</ul>
<p @click="addItem">
クリックで追加
</p>
</div>
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のライフサイクルを各種試してみましたが、上手くいきませんでした。
URL
githubのURL
https://github.com/kondo97/demo.git
動作確認用のURL
https://kondo97.github.io/demo/
その他
お分かりになる方がいらっしゃいましたら、ご教授いただけると大変助かります。
よろしくお願いいたします。
追記
本投稿はマルチポストとなっております。
https://teratail.com/questions/350335#reply-479899