使用vuejs拆分JavaScript

我有一个列表，是从http get请求得到的，在这个列表上，每个项目都有一个按钮来排除它自己，当被排除时，它会动态绑定到去掉该元素的视图，因为我正在拆分视图中呈现的同一个对象。 问题是，我发送的目的是排除第一项，而它排除了第二项，例如，我真的不知道为什么。分割函数的“索引”由vuejs发送，并且是正确的。有人知道发生了什么事吗

代码的某些部分如下所示：

<tr v-for="(teamLeader, index) in data">
       <td>{{index}}</td>

        <span class="mdl-button mdl-js-button mdl-js-ripple-effect" disabled>|</span> 
         <a class="mdl-button mdl-js-button mdl-js-ripple-effect" @click="confirmDelete(index,teamLeader.id)">Delete</a>
</tr>

---

JSfiddle:

confirmDelete？这是一个调用模态的函数，如果用户说要排除它，则调用delete function，但我已经尝试更改为delete function，结果是相同的。这似乎是正确的。删除一个用户后是否再次检索用户？这可能是一个异步的东西。好吧，发布的代码不会描述这个问题，它是正确的（前提是使用正确的索引调用deleteFunction）。因此，如果没有更多细节，这个问题是无法回答的。

deleteFunction: function(index,supportAreaId){
                API.delete('users/').then(response =>{
                    this.toast("success");
                    this.data.splice(index,1);
                })
}