Question

我有一个帖子循环，其中每个帖子都有一个评论框。最初所有评论框都是隐藏的，当有人点击“评论”时按钮，它应显示此用户的评论字段。我无法显示与特定帖子相关的特定评论框。我的代码如下 -

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）方法执行时，我想让下一个注释输入可见。任何帮助？

提前感谢。

Answer 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;
        }
    }
})

Answer 2

我可以分享的另一种方法是：

<强> 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>

如何在循环中显示按钮旁边的唯一输入字段

2 个答案: