【vue】组件阻塞导致后续操作、交互不生效

这天，根据需求，需要做出这么一个东西：

展示效果

在一个标签页中实现列表单项左滑出现更多操作（比如删除、添加）的功能。

出现的问题：

在第一个页签“板卡”中进行操作左滑没有问题，但是在第二个页签“其他”的就不能滑动

问题代码

问题思路1：

想到可能是外层的swiper的滑动切换面板可能影响到了内部的滑动操作，之后尝试着将swiper去掉也还是不可以

问题思路2：

最终怎么找，都不清楚哪里出了问题，忽然想到会不会是组件同时调用，导致该组件在那一瞬间虽然被调用了两次，但是内部的变量的内存地址使用的其实是一个？事实证明我是对的。

最终解决方案

知道了问题，那么只需要让两个面板的组件同时加载就好了

1. 先是在data中初始化一个变量，值为false

   
   
   初始为false

2. 在点击切换到第二个页签面板的时候将这个变量去改变为true

   
   
   变成了true

3. 最终就是在结构内容加判断就好了，在这里我用了 v-if 而不是 v-show