我是Vue.js的新手。
我正在发表评论和回复系统。
创建和删除评论和回复工作正常。
我想编辑评论。没有检索当前评论的编辑工作正常。
唯一的问题是我不知道如何在编辑字段中检索当前评论。
我想我需要将{{ comment.cotent }}插入textarea中的某个位置或在getComment方法上插入editComment方法，但我不知道该怎么做。
我正在使用Laravel和Vue.js 2以及Vue-resource。
<!-- This is a text area for write a comment. This works fine. -->
<div class="" v-if="$root.user.authenticated">
<textarea placeholder="Write a comment here!" class="form-control" v-model="content"></textarea>
<div class="pull-right">
<button type="submit" class="btn btn-default" @click.prevent="createComment">Save</button>
</div>
</div>
<!-- Showing comments. This works fine. -->
<li class="media" v-for="comment in comments">
<p>{{ comment.content }}</p>
</li>
<!-- Editing a comment without retrieving a current comment. This works fine but I want to retrieve a current comment!!!! -->
<div class="" v-if="commentEditFormVisible === comment.id">
<textarea class="form-control comment__input" v-model="commentEditBody"></textarea>
<div class="pull-right">
<button type="submit" class="btn btn-default" @click.prevent="editComment(comment.id)">Edit</button>
</div>
</div>
<!-- script -->
data() {
return {
comments: [],
content: null,
replyBody: null,
replyFormVisible: null,
commentEditBody: null,
commentEditFormVisible: null,
}
},
getComments() {
this.$http.get('/blog/' + this.blogslug + '/comments').then((response) => {
this.comments = response.body.data;
});
},
editComment(commentId) {
this.$http.put('/blog/' + this.blogslug + '/comments/' + commentId, {
content: this.commentEditBody
}).then((response) => {
this.content = null;
});
},