javascript - 使用Vue的v-for渲染了一个列表,每项都有折叠/打开功能,但点击一个打开就全部打开了,没有匹配到列表中单个项目vue
怪我咯
怪我咯 2017-04-10 17:46:12
[JavaScript讨论组]


如上列表,圈主那栏单个项目会有个更多按钮,点击更多会显示更多的圈主电话及昵称。那么现在我的问题是比如有列表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>
                                <p v-show="!open">
                                        <ul>
                                            <li v-for="master in item.roundAdmins">
                                                        {{master.phone}}</br>
                                                        {{master.nickName}}
                                            </li>
                                        </ul>
                                </p>
                                <button type="button" @click="open=!open">{{ open ? '更多' : '收起' }}</button>

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

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(2)
PHPz

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

PHPz

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号