axios调用绑定数据到vue答案

【问题标题】：Binding data to vue for axios callaxios调用绑定数据到vue
【发布时间】：2020-01-06 22:45:57
【问题描述】：

我不确定这里发生了什么，但我在按钮单击时调用 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 = '';
                });
        }

【问题讨论】：

如果你输入<p>{{ taskCommentBody}}</p>，你能看到它在你改变textarea时更新吗？
@KeithNicholas 不，它没有。我把它放在我的文本区域下，它仍然是空白的
在这里猜测，但您是否为taskCommentBody 定义了初始数据属性，例如data() { return { comments: [], taskCommentBody: '' } }
@Phil 很好的猜测，因为就是这样！谢谢，如果你愿意，请继续回答，我会马上接受的

标签： javascript vue.js

【解决方案1】：

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

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

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

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

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

【讨论】：