Vue 点击获取当前元素下标

项目开发中，固定列表是很常见的，有时候我们需要得到元素的下标去做一些事情，但是少了v-for想要获取下标就比较困难了，下面我便介绍我的方法：
其实我用的方法很简单，就是用事件委托机制去获取事件发生的元素，再获取父元素的子元素集合，再遍历子元素集合，当事件发生元素等于子元素集合中的某一个时，返回数组下标，即可得到事件发生元素的下标。

<template>
  <div class="footer-tab">
    <div class="tab-item">home</div>
    <div class="tab-item">second</div>
    <div class="tab-item">third</div>
  </div>
</template>

<script>

    export default {
        name: 'commonFooter',
        data() {
            return {}
        },
        created() {
        },
        mounted(){
          let _this=this;
          //事件委托
          document.querySelector(".footer-tab").addEventListener("click",function(e){
            let target=e.target;//事件发生的元素

            let nodeList=e.target.parentNode.children;//同级元素集合

            let targetIndex=_this.tabIndex(target,nodeList);//调用tabIndex方法，返回值便是元素下标

            console.log(targetIndex)//打印当前点击元素的下标
          })
        },
        methods: {
          /**
           *
           * @param target 事件触发的元素
           * @param nodeList 元素集合
           * @returns {number} 返回事件触发元素的下标
           */
          tabIndex(target,nodeList){
            for(let i=0;i<nodeList.length;i++){
              if(target===nodeList[i]){
                return i;
              }
            }
          }
        }
    }

</script>

<style scoped>

</style>

---