<! doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, User - scalable = no, initial - scale = 1.0, the maximum - scale = 1.0, Minimum -scale=1.0"> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>Document</title> <link rel="stylesheet" Href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" > <! - introduction of style - > < link rel = "stylesheet" href = "https://unpkg.com/element-ui/lib/theme-chalk/index.css" > < / head > < body > < div id="root" class="container"> <div class="list mb-2" v-for="(item ,index) in form.list":key="item+index"> <div class="item row row" v-for="(i,dex) in item.item":key="i+dex"> <div class="col-2">{{i.name}}</div> <div class="col-8"> <input type="text" class="form-control" v-model="i.value"> </div> </div> </div> </div> <! - production version, optimized the size and speed -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue" > < / script > <! - the introduction of component library - > < script SRC = "https://unpkg.com/element-ui/lib/index.js" > < / script > < script type = "text/javascript" > var lists = [{id: 1, the value: 1, name: 'channel 1}, {value: id: 2, 2, name:' channel 2}]. new Vue({ el:'#root', data(){ return { form:{ list:[ { item:Object.assign({},lists) }, { item:Object.assign({},lists) } ] } } }, methods:{ } }) </script> </body> </html>Copy the code

The above is the complete code, now send screenshots:

I used a two-level loop, the first loop through groups and the second loop through the number of inputs per group.

Because layer 2 data is retrieved through the interface.

Now, the problem is that when you modify the first one in the first group, the first one in the second group is also being modified simultaneously.

May I ask what causes this?