After spending the entire day browsing the internet, I need help. I am using a Vue.js app and in my component, I assign my data array variable to a response from the server. However, when I attempt to push some data to an array, I encounter this error: Uncaught (in promise) TypeError: _this.tasks.push is not a function. Upon logging out the response, I received the following:
{__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 the JavaScript code for my component:
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);
}
});
}
}
Can someone please point out what I'm doing wrong?