@kenTT0903posted at 2021-11-26

vue.jsのメソッドでpushを使った際にpush is not a functionのエラーの解決方法を教えてください。

Q&A

Closed

解決したいこと

javascriptのpushで以下エラーが出ます。
解決方法を教えて下さい。

発生している問題・エラー

出ているエラーメッセージを入力

Uncaught TypeError: this.list.push is not a function
    at Vue.addToDo (main.js:25)
    at click (eval at createFunction (vue.js:10667), <anonymous>:3:452)
    at invoker (vue.js:2029)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.js:1828)

状況

メソッドでCheckedを入れる前まではうまく動作していました。

該当するソースコード

<body>
    <div id="app">
        <span>{{ `残タスク数:${counter}/${Object.keys(list).length}` }}</span><br>
        <input type="text" v-model="addText" placeholder="ToDoを入力して">
        <button v-on:click="addToDo()">追加</button>
        <button v-on:click="deleteBtn()">削除</button><hr>
        <ul v-if="list.length">
            <ul v-for="todo in list">
                    <li>
                        <span v-bind:class="{ done: todo.isChecked }"> 
                                <input type="checkbox" v-model="todo.isChecked" v-on:change="Checked()">{{ todo.text }}
                        </span>
                    </li>
            </ul>
        </ul>
        <ul v-else>　
            <span>現在タスクはありません</span>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="js/main.js"></script>
</body>

    var app = new Vue({
    el: '#app',
    data: {
        list: [],
        addText: '',
        counter: 0,
    },
    //watchでlistの変更を監視
    watch: {
        list: {
            handler: function() {
                //localStorageにデータを保存
                localStorage.setItem("list", JSON.stringify(this.list));
            },
            deep: true
        }
    },
    //マウントされた時にlocalStorageからデータを取得
    mounted: function() {
        this.list = JSON.parse(localStorage.getItem("list")) || [];
    },
    methods: {
        addToDo: function() {
            if (this.addText !== '') {
                this.list.push({
                    text: this.addText, 
                    isChecked: false,
                });
            }
            this.addText = '';
        },
        deleteBtn: function() {
            this.list = this.list.filter(function(todo) {
                return !todo.isChecked;
            });
        },
        Checked: function(){
            this.list.filter(function(todo){
                if(todo.isChecked === true)
                    counter++;
            });
        }
    }
    });

1Answer

@Sacky_0729 posted at 2021-12-01

そのコードをコピペして貼り付けても、手元でエラーが再現できませんでした😭
代わりに以下のエラーが出ます👇

Uncaught ReferenceError: counter is not defined
    at main.js:39
    at Array.filter (<anonymous>)
    at Vue.Checked (main.js:38)
    at _c.on.change (eval at createFunction (vue.js:10667), <anonymous>:3:1287)
    at invoker (vue.js:2025)
    at HTMLInputElement.fn._withTask.fn._withTask (vue.js:1828)

とりあえず、以下のように修正してはいかがでしょうか？🤔

Checked: function(){
            this.list.filter(function(todo){
                if(todo.isChecked === true)
                    counter++; // this.counter++ に変更
            });
        }

チェックを付けた数をカウントする……という機能を付けたいなら、こんな感じでしょうか？

Checked: function() {
      this.counter = 0
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].isChecked === true) {
          this.counter++
        }
      }
    },

1Like

Comments

@kenTT0903
Questioner
ご回答ありがとうございます。

chromeでの実行でエラーが出ていたのですが、
別アプリでの実行で謎エラーは出なくなりました。
自アプリのchrome設定が原因かもしれません。。。

counterについては、thisをつけることでうまく動作しました。
ありがとうございます。

Are you sure you want to delete the question?