vue小白，前段时间用vue-cli加element plus遇到了一个有点离谱的bug，花了挺长时间找到了问题，记录一下。

问题

        出问题的部分是一个v-for循环，循环内的内容是element ui中的card组件，card组件的内容从js部分的data中获取。点击card右上角的按键后会弹出一个dialog框，在dialog框中进行radio单选后回传单选的选项并将这一项删除。

        由于是前后端分离开发，后端部分还没完善，因此只做了前端部分的调试，即data里数据写死，测试了删除功能。此时问题出现了：无论点击哪一项中的删除，最终删除的都是最后一个card组件。

问题发现

        测试在控制台打印数据后发现，无论点击的是哪一项，打印出的都是最后一项的下标，因此排除了查到的很多相似案例里出现的“因为v-for的key绑定了index而导致的渲染问题”，发现是确实只能获取最后一项的值。

        最后发现问题出在v-for中嵌套的dialog部分。我的dialog部分的代码是直接从官网复制修改的，大概如下图所示：

        在这里我忽略了循环中每一项都应该单独拥有一个dialogVisible属性，因此没有修改。这就导致所有的dialog都受到同一个dialogVisible属性控制。当打开某一个card所对应的dialog时，其实在很短的时间内打开了所有的card对应的dialog！这些dialog弹窗重叠在一起，关闭其中一个时也都将关闭，看起来像是只打开了一个一样。最上面的一个弹窗是循环中最后一项对应的弹窗，因此每次的操作反馈都是最后一项，自然删除的都是最后一项的数据，打印的也都是最后一项的下标。

问题解决

         为每个card设置单独的属性控制dialogVisible即可