Vue中如何点击获取当前元素下标

<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>

<div id="app">
			<fieldset>
				<legend>
					Create New Person
				</legend>
				<div>
					<label>姓名:</label>
					<input v-model="new_person.name">
				</div>
				<div>
					<label>年龄:</label>
					<input v-model="new_person.age">
				</div>
				<div>
					<label>性别:</label>
					<select v-model="new_person.sex">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</div>
				<div id="">
					<input type="button" name="" id="" value="创建" v-on:click="Create_person" />
				</div>
			</fieldset>
			<table>
				<thead>
					<tr>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="person in people">
						<td>{{ person.name }}</td>
						<td>{{ person.age }}</td>
						<td>{{ person.sex }}</td>
						<td><button @click="Delete_person(index)">删除</button></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>

<script>
		var vm = new Vue({
			el: "#app",
			data: {
				new_person: {
					name: '',
					age: 0,
					sex: '男',
				},
				people: [{
						name: '1',
						age: 0,
						sex: '',
					},
					{
							name: '2',
							age: 0,
							sex: '',
						},
						{
								name: '3',
								age: 0,
								sex: '',
							}
				],
			},
			methods: {
				Create_person: function() {
					this.people.push(this.new_person)
					this.new_person = {
						name: '',
						age: 0,
						sex: '男',
					}
				},
				Delete_person: function(index) {
					this.people.splice(index, 1);
					console.log(index)
				}
			}
		})
	</script>

<td><button @click="Delete_person(index)">删除</button></td>

// Vue 代码
	Delete_person: function(index) {
					this.people.splice(index, 1); //splice 命令如果传入下标将默认删除第一条
					console.log(index)
				}
			}

<li v-for="(item,index)  in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>
data里面声明：
data() {
    return {
      tabList: [
        { id: 0, title: "首页1" },
        { id: 1, title: "首页2" },
        { id: 2, title: "首页3" }
      ],
      current:0
    };
  },
  methods: {
    addClass: function(index,event) {
      this.current = index;
      //获取点击对象      
      var el = event.currentTarget;
      console.log("当前对象的内容："+el.innerHTML);
      console.log(this.current)

<tbody>
					<tr v-for="(person,index) in people">
						<td>{{ person.name }}</td>
						<td>{{ person.age }}</td>
						<td>{{ person.sex }}</td>
						<td><button @click="Delete_person(index)">删除</button></td>
					</tr>
				</tbody>