我有一个帖子循环,其中每个帖子都有一个评论框。最初所有评论框都是隐藏的,当有人点击“评论”时按钮,它应显示此用户的评论字段。我无法显示与特定帖子相关的特定评论框。我的代码如下 -
declare @max_columns int
declare @counter int
declare @header nvarchar(max)=''
declare @query nvarchar(max)=''
--temporary table with sample data
create table #tmp (ACCT_GRP_ID int, RECEPTION_START DATETIME, RECEPTION_END DATETIME)
--temporary table with new column information
create table #metadata (ACCT_GRP_ID int, col nvarchar(max), [val] datetime, [id] int)
--populate test data
insert into #tmp values (24, '20170725 00:09:00', '20170725 00:09:15'),(25, '20170725 00:09:15', '20170725 00:09:30'),(26, '20170725 00:09:30', '20170725 00:09:45'),(26, '20170725 00:09:45', '20170725 00:10:00'),(27, '20170725 00:15:00', '20170725 00:15:30'),(27, '20170725 00:15:30', '20170725 00:16:00')
--create the new combinations of columns and values
insert into #metadata
select ACCT_GRP_ID, 'RECEPTION_START_' + cast(t.ID as nvarchar(max)) as col ,RECEPTION_START as val, t.ID FROM (SELECT * , ROW_NUMBER() OVER ( PARTITION by ACCT_GRP_ID Order by RECEPTION_START ) AS ID FROM #tmp) t
union all
select ACCT_GRP_ID, 'RECEPTION_END_' + cast(t.ID as nvarchar(max)) as col ,RECEPTION_END as val, t.ID FROM (SELECT * , ROW_NUMBER() OVER (PARTITION by ACCT_GRP_ID Order by RECEPTION_START) AS ID FROM #tmp) t
--calculate the number of columns of the final table (the maximum number of RECEPTION_START/RECEPTION_END pairs)
select @max_columns= max(m.tot) from(
select COUNT(*)/2 as tot from #metadata group by ACCT_GRP_ID
) m
-- generate the list of columns that will be used for pivoting
set @counter=1
while @counter <= @max_columns
begin
set @header += 'RECEPTION_START_' + cast(@counter as nvarchar(50)) + ', RECEPTION_END_' + cast(@counter as nvarchar(50)) + ', '
set @counter = @counter + 1
end
--remove last unnecessary comma
set @header = SUBSTRING(@header,1,LEN(@header)-1)
--build dynamic query
set @query += ' select * from ('
set @query += ' select ACCT_GRP_ID, col, val from #metadata '
set @query += ' ) tmp'
set @query += ' PIVOT ( max(val) for Col in ('
set @query += @header
set @query += ' )) AS pvt'
--execute dynamic query
exec sp_executesql @query
当getComments(post,index)方法执行时,我想让下一个注释输入可见。任何帮助?
提前感谢。
答案 0 :(得分:1)
您可以向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;
}
}
})
答案 1 :(得分:0)
我可以分享的另一种方法是:
<强> 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>