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

高向阳
  • 1
新手上路,请多包涵

例如:

<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自动将新增的数据挂载到最后一个位置吗?
我要怎么解决这个问题,让她动态的加载到指定的位置
请各位大佬多多帮忙!


回复
阅读 2.3k
1 个回答
<div>
      <div v-for="(item,index) in allList" >{{`${item.name}---${index}`}}</div>
    </div>
     <button @click="allList.splice(2,0,{name:'第三'})">点我试试</button>

我这个这样写是可以的

clipboard.png

可以查看此链接 地址

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏