如何循环
问题描述：
我有一个职位的循环，每个岗位都有评论box.Initially所有评论框是隐藏的，当有人点击“评论”按钮，它应该显示注释中显示旁边的按钮，唯一的输入字段该用户的字段为。我无法显示与特定帖子相关的特定评论框。我的代码如下 -如何循环
<div class="post-section" v-for="(post,index) in posts">
<div class="media-content">{{post.body}}</div>
<button @click="getComments(post, index)" class="btn btn-link"><i class="fa fa-comments-o"></i>{{ post.total_comments }} Comments</button>
<comment-input :postId="post.id"></comment-input>
</div>
<script>
export default {
data() {
return {
posts: [],
}
},
created() {
Post.all(posts => this.posts = posts);
},
methods: {
getComments(post, index){
axios.post('getcomments', {id: post.id})
.then(response => {
this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }));
});
},
}
}
</script>
当getComments（post，index）方法执行时，我只想让下一个注释输入可见。任何帮助？
在此先感谢。
答
可以称为toggleComments: false一个额外的属性添加到您post对象。并用它来切换注释部分，包括其在<div>分组注释文本框。
这里是fiddle
HTML
<div id="app">
<div v-for="(post,index) in posts">
<p>{{post.body}}</p>
<button @click="getComments(post, index)" class="btn btn-link">Show/Hide Comments</button>
<div v-if="post.toggleComments">
<textarea rows="1" cols="50" placeholder="comment here ..."></textarea>
<div v-for='comment in post.comments'>
<span class="comm">Commented by:{{comment.name}}</span>
</div>
</div>
</div>
</div>
脚本
new Vue({
el: '#app',
data: {
posts: [
{id: 1, body: ' this is post #1'},
{id: 2, body: ' this is post #2'},
{id: 3, body: ' this is post #3'},
{id: 3, body: ' this is post #4'},
{id: 4, body: ' this is post #5'}
]
},
methods:{
getComments(post, index){
if(!post.comments){
Vue.http.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }, { toggleComments: false}));
},err => {
//handle errors
});
}
post.toggleComments = !post.toggleComments;
}
}
})
答
另一种方法，我可以分享的是：
HTML
<div class="post-section" v-for="(post,index) in posts">
<div class="media-content">{{post.body}}</div>
<button @click="getComments(post, index)" class="btn btn-link"><i class="fa fa-comments-o"></i>{{ post.total_comments }} Comments</button>
<comment-input v-if="index == selectedPostIndex" :postId="post.id"></comment-input>
</div>
脚本
<script>
export default {
data() {
return {
posts: [],
}
},
created() {
Post.all(posts => this.posts = posts);
},
methods: {
getComments(post, index){
axios.post('getcomments', {id: post.id})
.then(response => {
this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }));
});
this.selectedPostIndex = index;
},
}
}
</script>
这是你想要的吗？ https://jsfiddle.net/r_vamsi_krishna/smkw17Lk/ –
不完全！ ..每个帖子都有一个关联的评论框。我想最初隐藏所有评论框。当有人点击评论按钮（如UR小提琴），它将把所有的意见，也使看到的评论框只有这个职位。我已经简化了我的代码并显示在上面，并用图像更新了我的问题。它像谷歌加或Facebook。我希望你得到我想要的。感谢@VamsiKrishna – WahidSherief
@VamsiKrishna作为alwayw妳的传奇！非常感谢。它像魅力一样工作。 – WahidSherief