Add and change updates to vue array

for beginners in vue, try to write a function of the examination system and add questions.

< hr > < H2 > I wanted to add a big topic, but the previous big topic number has also changed. This big topic is push into the all one by one. What"s going on, or is it the update mechanism of vue? < / H2 >
new Vue({
    el: "-sharptodo-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.bidPP;//
            console.log(this.all);
        },
        addsmall: function() {//
            this.one.questions["Q"+this.sid]="123"+this.sid;
            //this.all.push(this.one);
            this.sidPP;
            console.log(JSON.stringify(this.all));
        }
    }
})
Jun.17,2022

say JavaScript alone, as shown in the following figure:
clipboard.png
whose problem do you think is the problem


because you add the same object to the array one , don't forget that js objects are of reference type. Each time you click to add a method, you update the value of one object: this.one.bid=this.bid . You can modify the first two lines of code to add a big topic method as follows:


this.all.push(this.one);

change this line of code to

let one = JSON.parse(JSON.stringify(this.one));
this.all.push(one);
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3bf37-2ba51.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3bf37-2ba51.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?