在我的vuejs代码中，我从Rails Api获取数据，这对帖子工作正常，我可以创建一个新帖子但是当我想发布评论并输入一个输入字段时，它会在每个输入中输入其他领域，我是初学者，请帮忙，我真的不知道怎么说一个问题。这是代码
<template>
<div class="home">
<div class="panel panel-default panel-shadow">
<div class="panel-body">
<form class="form-group" @submit.prevent="postGossip" style="margin: 10px;">
<textarea class="font-control" v-model="micropost.body" placeholder="What's Happening ?" style="padding: 10px;" rows="5"></textarea>
<span style="color:red">{{ errors.body }}</span>
<button class="btn btn-danger text-right pull-right">Post</button>
</form>
</div>
</div>
<div class="panel panel-white post panel-shadow" v-for="post in microposts" transition="item">
<div class="post-heading">
<div class="pull-left image">
<img src="http://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>Anonymous</b>
</div>
<h6 class="text-muted time">{{ getHumanDate(post.created_at) }}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.body}}</p>
<div class="stats">
<div v-on:click="isShow = !isShow" class="text-right">
<a href="javascript:void(0)" style="text-decoration: none;">Comments {{post.comments.length}}</a>
</div>
</div>
</div>
<div class="post-footer" v-show="isShow">
<div class="input-group">
<input class="form-control" placeholder="Add a comment" type="text" v-model="comment.body">
<span class="input-group-addon">
<button class="btn btn-primary" @click="postComment">Post</button>
</span>
</div>
<ul class="comments-list" v-for="comment in post.comments">
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="http://bootdey.com/img/Content/user_1.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h5 class="time">{{ getHumanDate(comment.created_at) }}</h5>
</div>
<p>{{comment.body}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'home',
data () {
return {
micropost: {
body: ''
},
errors: {},
microposts: [],
comment: {
micropost_id: '',
body: ''
},
isShow: false
}
},
methods: {
postGossip: function () {
let self = this
this.axios.post('http://localhost:3000/api/v1/microposts', {
micropost: self.micropost
}).then(function (response) {
self.errors = {}
self.microposts.unshift(response.data)
self.micropost.body = ''
}).catch(function (response) {
console.log(response)
self.errors = 'response.data.error'
})
},
getPosts: function () {
let self = this
this.axios.get('http://localhost:3000/api/v1/microposts').then(function (response) {
self.microposts = response.data
}).catch(function (errors) {
console.log(errors)
})
},
postComment: function () {
console.log(self.comment)
},
getHumanDate: function (date) {
// return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY')
return moment(date).fromNow()
}
},
mounted () {
this.getPosts()
}
}
</script>
<style>
body{
background-image: url('../assets/background.png');
}
.panel-shadow {
box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 3px;
}
.panel-white {
border: 1px solid #dddddd;
}
.panel-white .panel-heading {
color: #333;
background-color: #fff;
border-color: #ddd;
}
.panel-white .panel-footer {
background-color: #fff;
border-color: #ddd;
}
.input-group-addon{
background-color: transparent !important;
}
.post .post-heading {
height: 95px;
padding: 20px 15px;
}
.post .post-heading .avatar {
width: 60px;
height: 60px;
display: block;
margin-right: 15px;
}
.post .post-heading .meta .title {
margin-bottom: 0;
}
.post .post-heading .meta .title a {
color: black;
}
.post .post-heading .meta .title a:hover {
color: #aaaaaa;
}
.post .post-heading .meta .time {
margin-top: 8px;
color: #999;
}
.post .post-image .image {
width: 100%;
height: auto;
}
.post .post-description {
margin: 15px;
}
.post .post-description .stats {
margin-top: 20px;
}
.post .post-description .stats .stat-item {
display: inline-block;
margin-right: 15px;
}
.post .post-description .stats .stat-item .icon {
margin-right: 8px;
}
.post .post-footer {
border-top: 1px solid #ddd;
padding: 15px;
}
.post .post-footer .comments-list {
padding: 0;
margin-top: 20px;
list-style-type: none;
}
.post .post-footer .comments-list .comment {
display: block;
width: 100%;
margin: 20px 0;
}
.post .post-footer .comments-list .comment .avatar {
width: 35px;
height: 35px;
}
.post .post-footer .comments-list .comment .comment-heading {
display: block;
width: 100%;
}
.post .post-footer .comments-list .comment .comment-heading .user {
font-size: 14px;
font-weight: bold;
display: inline;
margin-top: 0;
margin-right: 10px;
}
.post .post-footer .comments-list .comment .comment-heading .time {
font-size: 12px;
color: #aaa;
margin-top: 0;
display: inline;
}
.post .post-footer .comments-list .comment .comment-body {
margin-left: 50px;
}
.post .post-footer .comments-list .comment > .comments-list {
margin-left: 50px;
}
.item {
box-sizing: border-box;
background-color: #eee;
border: 1px solid black;
display: inline-block;
width: 100px;
height: 100px;
}
.item-enter {
opacity: 0; /* the state right after enter (enter from this state) */
}
.item-leave {
opacity: 0; /* the state right before leave (leave to this state) */
}
.item-enter-active, .item-leave-active {
transition: opacity .5s ease; /* applied during enter/leave transition */
}
.item-move {
border-color: red;
transition: transform .5s cubic-bezier(.55,0,.1,1); /* applied during moving transition */
}
</style>
这就是发生的事情： 1
它写在每个评论框插入只有一个，任何帮助将不胜感激
答案 0 :(得分：0)
这种情况正在发生，因为您从API获得的对象post会返回许多comments。在你的迭代器v-for=comment in post.comments中，你将对象中定义的iteratee称为comment，导致＆＃34;碰撞＆＃34;使用您在组件data中定义的对象。
由于post也是一个微博的迭代，你应该将新创建的对象添加到微博中。请尝试以下方法。
在post.comments中更改iteratee名称v-for =＆＃39;评论＆＃39;到c。当然也可以在
<div class="comment-body">
<div class="comment-heading">
<h5 class="time">{{ getHumanDate(c.created_at) }}</h5>
</div>
<p>{{c.body}}</p>
</div>
然后你的postComment方法就可以克隆对象了clone an object
<button class="btn btn-primary" @click="postComment(post)">Post</button>
定义方法
postComment: function (post) {
post.comments.push({body: this.comment.body});
}
请记住，如果评论包含其他字段，则需要在附加到父对象post之前设置它们