vue数组添加变更新

Question

初学vue，试着写个考试系统功能，添加考题。

---

我本想点一下增加一个大题目，怎么之前的大题目编号也跟着变了，这个大题一个个push进all里去的，怎么个回事，还是vue的什么更新机制管着？

new Vue({
    el: '#todo-list-example',
    data: {
        bid:1,//大题编号
        sid:1,//小题编号
        all:[],
        one:{bid:1,title:'xxx',mark:1,rand1:true,rand2:true,questions:{}}
    },
    methods: {
        addbig: function() {//增加大题
           // this.one.questions["Q"+this.sid]='123'+this.sid;
            this.one.bid=this.bid;               
            this.all.push(this.one);
            this.sid=1;
            this.bid++;//大题目题号
            console.log(this.all);
        },
        addsmall: function() {//增加小题
            this.one.questions["Q"+this.sid]='123'+this.sid;
            //this.all.push(this.one);
            this.sid++;
            console.log(JSON.stringify(this.all));
        }
    }
})

Answer 1

因为你向数组添加的都是同一个对象one，别忘记js对象都是引用类型的，每点一下添加方法你都更新了one对象的值：this.one.bid=this.bid，可以修改一下添加大题方法的前两行代码为如下：

addbig: function() {
    let newOne = Object.assign({}, this.one, { bid: this.bid });
    this.all.push(newOne);
    ...
}

Answer 2

单独说JavaScript,如下图：

你觉得是谁的问题

Answer 3

this.all.push(this.one);

你把这行代码改成

let one = JSON.parse(JSON.stringify(this.one));
this.all.push(one);