Vuejs reset fields after POST success callback - firebase

Question

I'm having some problems resetting a textarea field after a POST request.
This is my component code
<template lang="pug">
.col-sm-12
h2 Add new Task
hr
.form-group
textarea.form-control(v-model="task.taskContent")
.form-group
button.btn.btn-primary(#click="createNewTask") Add Task
</template>
<script>
export default {
data() {
return {
task: {
taskContent: ''
}
};
},
methods: {
createNewTask() {
if (this.task.taskContent.length > 0) {
// Sending data to the server
this.$http.post('https://vue-taskmanager.firebaseio.com/task.json', this.task)
.then(response => {
console.log(response);
// Adding the new task to the main template list
this.$emit('taskWasCreated', this.task);
// Resetting textarea content
this.task.taskContent = '';
}, error => {
console.log(error);
});
} else {
alert("Sorry you can't create an empty task");
}
}
}
}
</script>
This is the parent component
<template lang="pug">
.container
.row
app-newtask(#taskWasCreated="addTask")
app-taskswrapper(:tasks="tasksArr")
app-footer
</template>
<script>
import { EventBus } from './main.js';
import UserRegistration from './components/user/UserRegistration.vue';
import TasksWrapper from './components/TasksWrapper.vue';
import NewTask from './components/NewTask.vue';
import Footer from './components/Footer.vue';
export default {
data() {
return {
tasksArr: [
'Just something to see'
]
};
},
methods: {
addTask(task) {
this.tasksArr.push(task)
}
},
// Listening on Events from Task.vue
created() {
// Delete task from array
EventBus.$on('taskWasDeleted', (taskIndex) => {
this.tasksArr.splice(taskIndex, 1);
// Delete task from db
this.$http.delete('https://vue-taskmanager.firebaseio.com/task.json', this.task)
.then(response => {
console.log(response);
}, error => {
console.log(error);
});
});
// Fetch tasks from db
this.$http.get('https://vue-taskmanager.firebaseio.com/task.json')
.then(response => {
return response.json();
})
.then(task => {
const resultsArray = [];
for (let key in task) {
resultsArray.push(task[key]);
}
this.tasksArr = resultsArray;
});
},
components: {
'app-taskswrapper': TasksWrapper,
'app-newtask': NewTask,
'app-footer': Footer,
'app-userregistration': UserRegistration
}
}
</script>
As you can see inside the response callback function I reset the task.taskContent value but the problem is that the string is sent to the db without problems while is not updated in the root component where I have an array storing all these strings.
I was thinking about using a watcher but I don't know if it's a good solution, do you have any suggestions?
Link to the github repo https://github.com/Polenj86/vue-taskmanager

Answer 1

It's clear what is happening now that you've posted your parent component.
You are storing the task object in the parent's array. This is not going to be a copy of the task, it's going to be a reference of the same task that you are about to clear. So when you later set this.task.taskContent = '' you are changing the task in the parent array too.
Consider this:
var task_holder_array = []
var task = {name: "mark"}
task_holder_array.push(task)
console.log("array before: ", task_holder_array)
task.name = ""
console.log("array after: ", task_holder_array)
You need to somehow create a new task object to push into the parent's array. There are a lot of ways you could do this. For example:
this.$emit('taskWasCreated', {name: this.task.name});
Or you could just pass the task name string to the parent and let the parent create the object.