Question

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

如何在Vue中使用显示/隐藏功能分别定位每个评论？

我知道为什么我的解决方案无法正常工作-但我不知道从哪里开始制作针对点击特定评论的功能。

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

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

1 个答案: