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

Question

我已经在Vue的服务器上生成了一个动态的评论动态列表，现在可以在每个评论上显示一个“回复”按钮，当点击它时会在其下面打开一个textarea并链接到该评论。但是，我的hacky解决方案意味着点击它打开了所有评论的文本框，而不仅仅是一个。

如何使用Vue中的show / hide功能单独定位每个注释？

我知道为什么我的解决方案不起作用 - 但我不知道从哪里开始创建一个针对点击它的特定注释的功能。

模板（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>

脚本（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

在每个评论上添加show属性，并使用它来显示/隐藏每个评论

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

相应地更改var

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