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

Question

我有一个 posts 循环，其中每个 post 都有一个评论 box.Initially 所有评论框都被隐藏，当有人点击 'comments' 按钮时它应该显示此用户的评论字段。我无法显示与特定 post 关联的特定评论框。我的代码如下-

<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) 方法执行时，我只想使下一个评论输入可见。有帮助吗？？

提前致谢。

Answer 1

您可以向 post 对象添加一个名为 toggleComments: false 的额外属性。并使用它来切换评论部分，包括分组在 <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>

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

How to show the only input field next to button within a loop

javascript

vue.js

laravel-5

axios

vuejs2