vuejs2.0 多维数组操作?

发布于 2022-09-04 06:39:49 字数 2491 浏览 26 评论 0

不知道为什么vue操作多维数组的时候,删除一个,所有的删除掉了.
html 如下

<div class="form-group" v-for='(tech,fatherIndex) in techs'>
    <tr v-for='(item,childIndex) in tech.items' @remove='console.log(childIndex)'>
        <td>
            <input type='checkbox' v-bind:true-value="2" v-bind:false-value="1" v-model='item.outside'>
        </td>
        <td>
              <a @click="$emit('remove')" class='btn btn-danger'>移除</a>
              <a @click="createItem(fatherIndex)" class='btn btn-success'>{{fatherIndex}} - {{childIndex}}新增</a>
        </td>
   </tr>
</div>


js代码如下

var app = new Vue({
  el: '#techs',
  data: {
      catTpl : {
          catId:0,
          items:[
              {
                  techId:0,
                  deviceId:0,
                  skillId:0,
                  receiveMemo:'',
                  workingMemo:'',
                  finishMemo:'',
                  ousite:1,
                  check:1
              }
          ],
      },
      itemTpl : {
          techId:0,
          deviceId:0,
          skillId:0,
          receiveMemo:'',
          workingMemo:'',
          finishMemo:'',
          ousite:1,
          check:1
      },
      catId:100,
      itemId:1000,
    techs : [
        {
            catId:1,
            items:[
                {
                    techId:1,
                    deviceId:1,
                    skillId:1,
                    receiveMemo:'',
                    workingMemo:'',
                    finishMemo:'',
                    outside:1,
                    check:1
                },
            ]
        },
    ]
  },
  methods: {
        addCategory:function(){
            this.techs.push(this.catTpl)
        },
        removeCategory:function(fatherIndex){
            this.techs.splice(fatherIndex,1)
        },
        removeItem:function(fatherIndex,sonIndex){
            this.techs[fatherIndex].items.splice(sonIndex,1)
        },
        createItem:function(fatherIndex){
            this.techs[fatherIndex].items.push(this.itemTpl)
        }
    }
})

父类的增减没有问题, 但是在父类下面增加子类的时候, 除了初始化的techs数据,增加的都会同步操作,如在console 运行如下代码 app.techs[1].items.push(this.itemTpl) ,所有的动态添加的父类都会自动加上一个子类。
app.techs[1].items.splice(sonIndex,1) 所有动态父类下的子类都会删除这个对象。
请问这是什么原因, 先行谢过!

代码演示

父类和子类都在上面注明了. 之前可能说的不大清楚

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

紧拥背影 2022-09-11 06:39:49

因为你的push操作的和splice操作的都是同一个对象

月亮邮递员 2022-09-11 06:39:49

求助啊 ,自己顶一下

〆一缕阳光ご 2022-09-11 06:39:49

来个在线例子吧 没明白你的问题点在哪
按你给的代码 跟你的问题没啥逻辑关系

榆西 2022-09-11 06:39:49

请问楼主解决了么,我也遇见了一样的问题,能否解答一下

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文