CODEWITHSUNDEEP
javascriptvue.js
Geoff_S
Geoff_S

Reputation: 5107

Binding data to vue for axios call

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 = '';
                });
        }

Upvotes: 1

Views: 289

Answers (1)

Phil
Phil

Reputation: 164729

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.

Upvotes: 1

Related Questions