在一个列表项中显示/隐藏元素，而不是全部

Question

I've generated a dynamic list of comments on a post from my server in Vue, and would now like a 'reply' button to appear on each comment that when clicked opens a textarea underneath it and is linked to that comment. However, my hacky solution meant that clicking on it opened all of the comments' text boxes, not just one.

How can I target each comment individually with a show/hide function in Vue?

I know why my solution isn't working—but I don't know where to start making a function that targets the specific comment on clicking it.

Template (HTML)

<ul>
    <li v-for="comment in comments" :key="comment.data.id">
        <div>User details</div>
        <div>Comment content</div>
        <div>
            <span>
                <a v-on:click="hideReply = !hideReply">Reply</a>
            </span>
        </div>

        <form v-if="hideReply">
            <textarea>Reply text box</textarea>
            <button>Reply button</button>
        </form>
    </li>
    <li>Another comment in the list...</li>
    <li>Another comment in the list...</li>
    ...
</ul>

Script (JS)

export default {
    name: 'Post',
    components: {},
    data () {
        return{
            hideReply: false,
            comment: undefined,
            comments: undefined
        }
    },
    async created () {
        // code to bring in my comments from server
    },
    methods: {
        betterShowHideFunction () {
            // where do i start
        }
    }
}

Answer 1

Add a show property on each comment and use that for showing/hiding each individual comment

<form v-if="comment.show">

Change the var accordingly

<a v-on:click="comment.show = !comment.show">Reply</a>