vue中table数列怎么指定位置插入数据？而不是动态的挂载在最后一个位置！

Question

例如：

<template>
  <div>
    <div>
      <div  v-for="(item,index) in allList" >{{`${item.name}---${index}`}}</div>
    </div>
    <button @click="allList.splice(2,0,{name:'第三'})"/>
  </div>
</template>
<script>
export default {
  data(){
    return{
      allList:[{
        name:"第一"
      },{
        name:"第二"
      },{
        name:"第四"
      },{
        name:"第五"
      }]
    }
  }
}

---

上面的代码初次加载完成后会大致显示为

1. 第一
2. 第二
3. 第四
4. 第五

---

当点击button后，在列表的第二个下标位置增加一条记录。会显示为

1. 第一
2. 第二
3. 第四
4. 第五
5. 第三

---

而不是

1. 第一
2. 第二
3. 第三
4. 第四
5. 第五

---

是VUE自动将新增的数据挂载到最后一个位置吗？
我要怎么解决这个问题，让她动态的加载到指定的位置
请各位大佬多多帮忙！

---

Answer 1

<div>
      <div v-for="(item,index) in allList" >{{`${item.name}---${index}`}}</div>
    </div>
     <button @click="allList.splice(2,0,{name:'第三'})">点我试试</button>

我这个这样写是可以的

可以查看此链接 地址