What's the difference between vue's data binding and the data added to data after the loop is complete?

the existing demand is that you need to create a table with month and amount in it.
because each field is the same, writing 12 identical pieces of data in data feels too redundant. I just want to write a loop and add it to data for rendering after 10 cycles. But there is a problem:

data12;datadom

how to solve the problem of little brothers and sisters ~

//
data() {
    return {
                    monthTableData: {
                        paymentType:"",
                        paymentMonth: "",
                    },
    }
}
            copyData() {
            let list = [];
            for (var i =0; i<=5;iPP) {
                for (let k in this.monthTableData) {
                    list.push(this.monthTableData);
                }
            }
                this.monthTableDataNew = list;
            },

Element-ui vue.js html5 html javascript

May.02,2021

object is a reference type.

list.push(this.monthTableData)

No matter how many this.monthTableData, array list you push, the elements in the list are all the same object, so changing any one of them will change naturally.
can be copied deeply first. Or:

list.push({
    paymentType:"",
    paymentMonth: '',
})

I'm not sure what you mean by two-way binding, which refers to binding the monthTableData? in data. Then put it in copyData so that you don't have to put it in the data attribute, as follows
copyData () {

        let = monthTableData: {
            paymentType:"",
            paymentMonth: '',
        },
        let list = [];
        for (var i =0; i<=5;iPP) {
            for (let k in monthTableData) {
                list.push(monthTableData);
            }
        }
            this.monthTableDataNew = list;
        },

When the

Vue component is instantiated, the result returned by data is refactored once, replacing all properties with getter/setter . For example, the object returned by the following example has a property a with a value of 1:

{
  _a: 1,
  get a() {
    return _a;
  },
  set a(value) {
    _a = value;
  }
}

this is Vue's responsive way of collecting data changes. Therefore, after instantiation, if you modify the object, such as this.b = 'hello world'; , because the object this.$data does not have getter/setter of b , it will follow the JS standard assignment process, and the latter will not have the ability to respond.

back to your question, you will respond after processing the assignment to data, because there is getter/setter ; deal with it after assignment, no.

Previous: How to solve the jenkins expiration request of Code Cloud webhook?

Next: Communication between processes in python3, Queue

The table of Element UI can be edited after double click. What can I do?
after my page loads, there will be a sort number. when I double-click the current row, the sort number will become editable and will be saved after losing focus. what do I do? I can get the id, of the current line, but how to edit the current line....

Element-ui vue.js html5 html javascript

Mar.03,2021