第一种方法:通过给每条数据添加字段的方法

给每一项点击的地方添加一个点击事件,把当前的列表项作为参数传递过去

在methods里面写点击事件:

首先判断列表项有没有这个字段,没有的话就通过this.$set添加字段,然后进行取反,有这个字段的话直接取反。

this.$set(你要添加数据的数组或对象, '字段名称', 字段值)

最后通过v-show控制代码块的显示隐藏

 

第二种方法:在data里面设置一个属性

在data里面设置一个属性thisIndex,给一个初始值为-1或者null:

写点击事件的时候,将当前项的下标作为参数传过去:

在点击事件中,当thisIndex为空时则将当前项的下标赋值给它,当不为空时则将thisIndex清空即可:

但是这种方法有个bug,只能控制一个元素的显示隐藏,thisIndex毕竟还是全局的,当要同时展开两个时就会出问题,所以最好还是使用第一种给数据加字段的方法。

Logo

前往低代码交流专区

更多推荐