How to dynamically add variables to data with vue

vue dynamically adds variables to data

My business is to dynamically assign values to v-model, but you have to change it, so you can't do one-to-one, then you have to dynamically create variables

First you have to know what your data structure looks like, and then you use an array to dynamically create variables based on the structure of your data.

Then use the empty array you created to correspond to the v-model assignment one by one

js：

for (var i =0;i< _this.;i++) {
         _this.([]);
           for (var k = 0;k<_this.[i].;k++) {
                  _this.timeSet[i].push({stopTime:'',measureText:''});
                        }
             }

data：

timeSet : [];

html：

&lt;div class="module"&gt;
    &lt;div class="question-group" v-for="(item,index) in " :key="index"&gt;
            &lt;p class="group-title"&gt;{{}}&lt;/p&gt;
            &lt;div class="group-content" v-for="(list,idx) in " :key="idx"&gt;
                &lt;div class="question"&gt;
                    &lt;div class="question-type"&gt;all&lt;/div&gt;
                    &lt;p class="question-title"&gt;{{}}&lt;/p&gt;
                    &lt;div class="question-sub"&gt;
                        &lt;p class="title"&gt;Voucher details&lt;/p&gt;
                        &lt;textarea class="input-show" placeholder="Please enter the measures" v-model="timeSet[index][idx].measureText"&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                    &lt;div class="question-options form-item-group"&gt;
                        &lt;div class="module-wrapper half"&gt;
                            &lt;!-- Time selection(With title) --&gt;
                            &lt;div class="form-item with-label"&gt;
                                &lt;p class="label"&gt;Mission end time&lt;span class="required"&gt;*&lt;/span&gt;&lt;/p&gt;
                                &lt;div class="module"&gt;
                                    &lt;flat-pickr :config="pickrConfig" placeholder="Please select the end time" v-model="timeSet[index][idx].stopTime"&gt;&lt;/flat-pickr&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

vue dynamically adds suffixes to variables in data

For example, show1, show2, show3, and show4 declared in data, it is showX when there is a scene.

A variable is needed to assign values of 1, 2, 3, 4...

let index = 1/2/3/4
this[`show${index}`]

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.