Uncaught TypeError: Cannot read property 'push' of undefined

Question

Vue.jsで簡単なTODOリストを作成中に出たエラーです。

■エラー内容
コード内の「//ここでエラー」とある部分でタイトルのエラーとなってしまいます。

■実現したい事
ブラウザリロード時にもTODOリストの内容が保持できるように、TODO追加時にローカルストレージに格納（addItem()）、onload時にローカルストレージに保存されているデータを引っ張ってきて描画するというものです。

■ブラウザ
Google Chrome（バージョン: 77.0.3865.90）

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                inputAdd: "",
                todos:[]
            },
            methods:{
                window:onload = function(){
                    //画面リロード時、ローカルストレージに格納されている値を引っ張ってくる
                    var jsonObj = localStorage.getItem('Key');
                    var jsObj = JSON.parse(jsonObj);
                    var todo = {
                        //試しに0番目だけ取ってきたい
                        item: jsObj[0].item
                    }
                    //ここでエラー
                    this.todos.push(todo);
                },
                addItem:function(){
                    if(this.inputAdd == ''){return;}
                    var todo = {
                        item: this.inputAdd
                    }
                    
                    this.todos.push(todo);
                    this.inputAdd="";
                    //ここのタイミングでローカルストレージに格納
                    var obj = JSON.stringify(this.todos);
                    localStorage.setItem('Key', obj);
                }
            }
        })
    </script>

addItem()の際には同様の処理をしてもエラーが出ないようで原因がわかりません。
詳しい方、ご教授いただければ幸いです。
宜しくお願いいたします。

Answer 1

おそらく this が予想と違ったものになってる。いろいろなところで console.dir(this)してみてください。

window:load ではなく、mounted 内でやれば this および this.todos は期待通りになるのではないでしょうか。

Comments

[matobaa]

おっと出遅れてた

[sasa0330]

ありがとうございます！

Answer 2

pushというプロパティがないと言ってますが。
まずはtodosになにが入ってるのか調べてみては

Comments

[sasa0330]

console.log(this.todos);
エラー行の前にこちらを差し込んだら、undefindとなりました…

todosは定義しているはずなのでいまいちわかりません…
onloadの中だとtodosが定義前の状態になってしまっている気がします…

Answer 3

createdフックの中でjsonローカルストレージから値を取得→todosにpushすることで解消されました！
「リロード時にデータを取得、描画したい」ということでmethodの中でwindow.onloadを使用していましたが、この中でthis.hogehogeとすると、このthisが思わぬ挙動になりdataで定義したプロパティを参照しなくなるようです。（まだ知識が乏しく、うまく説明できていなかったらすみません。。。）

解決したコード例

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                inputAdd: "",
                todos:[]
            },
            created: function () {
                var jsonObj = localStorage.getItem('Key');
                var jsObj = JSON.parse(jsonObj);
                var todo = {
                    //試しに0番目だけ取ってきたい
                    item: jsObj[0].item
                }
                //ここでエラーが起きていた
                this.todos.push(todo);
            },
            methods:{
                addItem:function(){
                    if(this.inputAdd == ''){return;}
                    var todo = {
                        item: this.inputAdd
                    }

                    this.todos.push(todo);
                    this.inputAdd="";
                    //ここのタイミングでローカルストレージに格納
                    var obj = JSON.stringify(this.todos);
                    localStorage.setItem('Key', obj);
                }
            }
        })
    </script>

ご指摘あればお願いします。
フック、便利です。