使用Vue的v-for渲染了一个列表，每项都有折叠/打开功能，但点击一个打开就全部打开了，没有匹配到列表中单个项目vue

Question

如上列表，圈主那栏单个项目会有个更多按钮，点击更多会显示更多的圈主电话及昵称。那么现在我的问题是比如有列表10个项目，是个项目都有多个圈主，我点击其中一个项目的更多，那么十个项目的全打开了，而我们想要的只是打开你点击的那一个而已。
下面代码：

//这个ul是为了默认显示两个圈主信息
 <ul v-show="open">
                                            <li>
                                                {{item.roundAdmins[0].phone}}</br>
                                                {{item.roundAdmins[0].nickName}}
                                            </li>
                                             <li>
                                                {{item.roundAdmins[1].phone}}</br>
                                                {{item.roundAdmins[1].nickName}}
                                            </li>
                                        </ul>
                                <div v-show="!open">
                                        <ul>
                                            <li v-for="master in item.roundAdmins">
                                                        {{master.phone}}</br>
                                                        {{master.nickName}}
                                            </li>
                                        </ul>
                                </div>
                                <button type="button" @click="open=!open">{{ open ? '更多' : '收起' }}</button>

我现在的思路是要么上上面那么用js去控制隐藏和显示，要么用css控制ul的高度，从而只显示两个，然后改css高度全部显示，达到折叠隐藏目的！
可我这两种思路我都不知道怎么去单独匹配点击的那条项目，vue刚开始也不熟悉，请教下，如何点击后只去控制单独的那条数据，而不是点击一个打开，然后全部都打开了

Answer 1

不应该判断open。因为你所有的都成了判断open。不是独立的作用域。把你的显示隐藏。绑在item里面。判断这个

Answer 2

你这个肯定是状态没有相互独立，你检查下你的组件里的data属性是不是一个返回函数？！