Vue-grid-layout解决grid元素被别的grid掩盖的问题

问题：在使用vue-grid-layout的时候，每个layout之间的z-index不一样，会导致一个grid里的bubble或者弹窗被另一个grid盖住的情况。

尝试了多种办法，最后采取的是这样的解决方案：如果某个grid被激活（onFocus），触发一个方法设置一个activeItem，如果这个item的item.i与activeItem相等，就把这个grid的z-index设置成999，其它的则为零，这样的话，只要是被使用中的grid，就会被放置在最上面。

第一步：在触发focus的位置，比如我的是editor里，触发一个方法

@focus="onEditorFocus(item.i)"

第二步：在data里设置一个activeItem的变量，默认为0

activeItem: 0,

第三步：在methods里对应的方法里，将activeItem设置为当前focus的i

onEditorFocus (i) {
  this.activeItem = i
},

第四步：在div中，使用v-bind:style加一个三元表达式，将focus的grid的z-index变成最高。

:style="{ 'z-index': activeItem == item.i ? 999 : 0 }"

由此可以实现想要的效果。

鸣谢：vue 里的 style 能加入判断吗？