Having an issue with my Vue function that is triggered by a button click. It makes an axios call, but the problem is that no matter what I type in the textarea (v-model taskCommentBody), it sends the data commentBody as blank. Not sure what's causing this issue.
Any insights on what could be going wrong here?
<div class="form-group row">
<textarea v-model="taskCommentBody" class="form-control col" rows="6" placeholder="What are your thoughts on this task?" name="task-comment"></textarea>
</div>
<button v-on:click="saveTaskComment" role="button" class="btn btn-primary" type="submit">
Save Comment
</button>
/**/
saveTaskComment() {
axios.post('/task/comment/save', {
commentBody: this.taskCommentBody
})
.then((response) => {
// handle success
this.comments.unshift(response.data.content);
})
.catch(function (error) {
// handle error
})
.finally(() => {
this.$root.taskCommentBody = '';
});
}