javascript - Binding data to vue for axios call

Question

I'm not sure what's happening here, but I'm calling a function in Vue upon button click, and it makes an axios call but the issue is that no matter what I type in the textarea (v-model taskCommentBody) it sends the data commentBody as blank.

What am I doing wrong here?

<div class="form-group row">
                <textarea v-model="taskCommentBody" class="form-control col" rows="6" placeholder="What do you have to say about 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 = '';
                });
        }

Answer 1

_{I feel like there's an existing answer for this problem but I cannot find it so here goes my attempt at a canonical answer...}

Any value that you want to be reactive within a Vue component or instance must be defined within the data property. Without this, Vue cannot create the required observable properties needed to read and write values from v-model bindings.

So in your case, you will need something like

data: () => ({
  comments: [],
  taskCommentBody: ''
})

---

_{If anyone can locate an existing post, I'm happy to mark this as a duplicate and make this answer a community wiki.}