Vue数组获取下标坑

使用Vue 编写了基础的添加删除功能遇到了一个小坑

			

				

					Create New Person
				

				

					姓名:
					
				

				

					年龄:
					

				

				

					性别:
					

						男
						女
					

				
				

					
				

			
			

				

					

						
姓名
						
年龄
						
性别
						
删除
					
				
				

					

						
{{ person.name }}
						
{{ person.age }}
						
{{ person.sex }}
						
						
删除
					
				
			
		
	

Vue代码

删除功能遇到点小坑，每次点击删除都会删除第一条内容

后来发现在下面代码处index并未获取还并为报错

删除

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

				}
			}

由此从以下代码中查找到获取下标的方法

{{item.title}}
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)

然后修改代码

				
					
						{{ person.name }}
						{{ person.age }}
						{{ person.sex }}
						
						删除