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));
        }
    }
})
Vue.js
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);

Previous: Mini Program conditional rendering does not work after binding global variables

Next: Why does the parameter obtained by nginx, a slash with URL format, become a

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu