时间戳

首页 > 解决方案 > axios调用绑定数据到vue

javascript - axios调用绑定数据到vue

问题描述

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

我在这里做错了什么？

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

标签： javascriptvue.js

解决方案

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

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

所以在你的情况下，你需要类似的东西

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

如果有人可以找到现有帖子，我很乐意将其标记为重复并将此答案设为社区 wiki。

推荐阅读