将数据绑定到 vue 以进行 axios 调用 [英] Binding data to vue for axios call

问题描述

我不确定这里发生了什么，但是我在单击按钮时在 Vue 中调用了一个函数，它进行了 axios 调用，但问题是无论我在 textarea (v-model taskCommentBody) 中输入什么它将数据 commentBody 发送为空白.

我在这里做错了什么?

<textarea v-model="taskCommentBody" class="form-control col" rows="6" placeholder="你对这个任务有什么想说的?name="task-comment"></textarea>
<button v-on:click="saveTaskComment" role="button" class="btn btn-primary" type="submit">保存评论/**/saveTaskComment() {axios.post('/任务/评论/保存', {commentBody: this.taskCommentBody}).then((响应) => {//处理成功this.comments.unshift(response.data.content);}).catch(函数(错误){//处理错误}).finally(() => {this.$root.taskCommentBody = '';});}

解决方案

_{我觉得这个问题有一个现有的答案，但我找不到，所以我尝试规范的答案...}

您希望在 Vue 组件或实例中响应的任何值必须在 data 属性中定义.没有这个，Vue 就无法创建从 v-model 绑定读取和写入值所需的 observable 属性.

所以在你的情况下，你需要像

data: () =>({注释: []，taskCommentBody: ''})

<小时>

_{如果有人可以找到现有帖子，我很乐意将其标记为重复并将此答案设为社区维基.}

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

解决方案

_{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.}

这篇关于将数据绑定到 vue 以进行 axios 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！