Trying to add an object to the tags array after making an axios post, but encountering an error when pushing the object.
[Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"
Why is this happening?
I apologize if my question is not clear as I am still a beginner.
Initially, everything was working fine, but after some changes, it stopped working.
I'm not using 'text' anywhere.
javascript/packs/index_vue.js
new Vue ({
el: '#tags',
methods: {
~~~~~~~~~~omit~~~~~~~~~~~
addTag: function(){
this.submitting = true;
const newTag = {
tag: {
title: this.newTagTitle,
status: 0,
tasks: []
}
}
axios.post('/api/tags', newTag)
.then((res) => {
console.log('just created a tag')
//error occurring here
this.tags.push(newTag);
this.newTagTitle = '';
this.submitting = false;
this.showNewTagForm = false;
}).catch(error => {
console.log(error);
});
｝,
addTask: function(tagId, i) { // added by edit
const newTask = {
task: {
text: this.newTaskTextItems[i].text,
deadline: this.newTaskDeadlineItems[i].deadline,
priority: this.newTaskPriorityItems[i].selected
},
tag_task_connection: {
tag_id: tagId
}
}
axios.post('/api/task/create', newTask)
.then(() => {
console.log('just created a task')
newTask.task.limit = Math.ceil((parseDate(this.newTaskDeadlineItems[i].deadline).getTime() - new Date().getTime())/(1000*60*60*24));
this.tags[i].tasks.push(newTask.task);
this.newTaskTextItems[i].text = '',
this.newTaskDeadlineItems[i].deadline = '',
this.newTaskPriorityItems[i].selected = '',
newTask.tasks = '',
newTask.tag_task_connection = ''
}).catch(error => {
console.log(error);
});
}
~~~~~~~~~~omit~~~~~~~~~~~
},
mounted: function () {
axios.get('/api/tags')
.then( res => {
this.tags = res.data.tags,
this.newTaskTextItems = res.data.newTaskTextItems,
this.newTaskDeadlineItems = res.data.newTaskDeadlineItems,
this.newTaskPriorityItems = res.data.newTaskPriorityItems,
this.checkedItems = res.data.checkedItems
})
},
data: {
tags: [],
options: [
{ name: "Low", id: 1 },
{ name: "Medium", id: 2 },
{ name: "High", id: 3 }
],
showNewTagForm: false,
showStatusFrom: false,
changeStatusTag: 0,
deleteConf: false,
deleteTarget: 0,
helloWorld: false,
firstModal: true,
newTagTitle: '',
loading: false,
submitting: false,
newTaskTextItems: '',
newTaskDeadlineItems: '',
newTaskPriorityItems: ''
}
~~~~~~~~~~omit~~~~~~~~~~~
})
views/tags/index.html.slim
routes.rb
controllers/api/tag_controller.rb
models/tag.rb
views/api/tags/index.json.jbuilder
I made some changes to the code, but the same error persists.
In index_vue.js:
this.tags.push(newTag);
→this.tags.push('something');
When doing this, no error occurs. Is push() incorrect?
this.tags.push('something');
→console.log(this.tags)
// this.tags.push('something');