javascript - 动态改变元素的索引

Question

我正在尝试做这样的事情：

我按下按钮并弹出窗口，现在这个窗口的索引将为 1，如果我按下另一个按钮，新窗口（div 元素）将出现，但它的索引将为 2。

现在我有了这个函数——点击它使用全局索引变量设置索引，在我的函数结束时，我增加索引变量。但是我没有得到结果——索引变量没有增加（只有在我点击同一个按钮时它才会增加）。有什么解决办法吗？

代码：HTML

<div @click="open(file.name)" class="folder">
    <div class="folder-styling">


    <div :style="{ 'background-image': 'url(/img/' + file.icon + '.png)' }" class="folder-icon">

    </div>
    <p>{{file.name}}</p>

    </div>
</div>

JS：

        open(folder){


       var doc = document.getElementById(folder)
       doc.style.zIndex = this.$index+1
       var tab = document.getElementById('tabs'+folder)
       doc.style.display = "block",

       tab.style.display = "inline-block",
       this.$props.file.active(true)
       this.index = this.$index + 1
       console.log(this.$index)


    }

main.js 文件中的全局变量：

Vue.prototype.$index = 1

标签： javascriptvue.js