Home » vue » Uncaught (in promise) TypeError: _this.tasks.push is not a function

Uncaught (in promise) TypeError: _this.tasks.push is not a function

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’ve been surfing through the internet for the whole day…Help. I have Vue.js app. In my component I equate my data array variable to a response from server. But when I try to push some data to an array this error appears: Uncaught (in promise) TypeError: _this.tasks.push is not a function. I tried to log out response and it returned this:

{__ob__: Observer}
8
:
(...)
9
:
(...)
15
:
(...)
__ob__
:
Observer {value: {…}, dep: Dep, vmCount: 0}
get 8
:
ƒ reactiveGetter()
set 8
:
ƒ reactiveSetter(newVal)
get 9
:
ƒ reactiveGetter()
set 9
:
ƒ reactiveSetter(newVal)
get 15
:
ƒ reactiveGetter()
set 15
:
ƒ reactiveSetter(newVal)
__proto__
:
Object

Here is my component js code

import User from '../../services/UserService';
    export default {
        data() {
            return {
                taskText: '',
                tasks: []
            }
        },
        methods: {
            createNewTask() {
                User.createUserTask(this.taskText).then(response => {
                    if (response) {
                        this.tasks.push(response);
                        this.taskText = '';
                        Materialize.toast('Task was added', 4000);
                    }
                });
            },
            markTaskAsDone(taskId) {
                User.markTaskAsDone(taskId).then(response => {
                    if (response) {
                        this.tasks = this.tasks.filter(task => task.id !== taskId);
                        Materialize.toast('Task was completed', 4000);
                    }
                });
            }
        },
        mounted() {
            const toast = Materialize.toast('Loading...');
            User.getUserTasks().then(response => {
                if (response) {
                    this.tasks = response;
                    toast.remove();
                    console.log(response);
                }
            });
        }
    }

What am I doing wrong?

Answers:

The only inference that i can make is, the response is not an array on this equalization.

this.tasks = response;