如下代码，怎么在depts_click事件触发时，控制的is_open只在当前元素生效？

作者站长头像
站长
· 阅读数 34
<view class="depts" v-for="(depts,index) in resData.depts" :key="'depts'+index"
                v-if="resData.depts.length != 0">
                <view class="depts_content" @click="depts_click(depts)">
                    <view class="depts_content_right">
                        <view class="depts_arrow_icon">
                            <image :class="is_open == false? 'arrow_icon downIcon' : 'arrow_icon upIcon'"
                                :src="arrowIcon" v-show="(depts.subUsers + depts.subDepts != 0) && show_loading">
                            </image>
                            <u-loading-icon size="20" :show="is_loading"></u-loading-icon>
                        </view>
                    </view>
                </view>
            </view>

如下代码，怎么在depts_click事件触发时，控制的is_open只在当前元素生效？页面效果如下代码，怎么在depts_click事件触发时，控制的is_open只在当前元素生效？

回复
1个回答
avatar
test
2024-07-02

你的在数组的每个对象中放一个 is_open 字段来单独控制每个tab的状态，你可以在拿到 resData.depts 之后先初始化它

deptsList = resData.depts.map(item => {
    item.is_open = false
    return item
})

// dom 中
<view v-for="(depts, index) in deptsList" ...>
<view class="depts_content" @click="depts_click(depts, index)">
    ...
    <image :class="depts.is_open === false" >

...
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容