Vue interface Data (array) statement

When the interface data already has an array, it is actually simpler to directly bring up the array in the data, using the name in the data.

1 <Divv-for= "Item in Listarr" 2 : Class= "{red:item.runstatus==1,blue:item.runstatus==2,orange:item.runstatus==3}">//Judge the value of Item.runstatus, the value is different from class3      <Iclass= "Glyphicon text-center glyphicon-star"v-if= "type = = 3"}"></I>//type different, I's class is different (here is Bootstrap's icon)4      <Iclass= "Glyphicon text-center glyphicon-globe"v-if= "type = = 4"></I>5      <Pclass= "Text-center WINDP">{{Item.devicename}} {{Item.runstatus}}</P>//Insert Data6      <Pclass= "Text-center windptwo">{{Item.buildname}}&nbsp;{{Item.floorname}}</P>7 </div>

Vue:

1 default {2    data () {3         return  {4             Listarr:[],5             Type:this. $route. params.type,//definition Type6         }7     },        

Connection Interface Statements
1 Getflistarr () {2                This. http ({3 url: ' url ',4Method: ' GET ',5 data: {6OrgId: This. $route. Params.id,7Devicegroup: This. $route. Params.type,8                       9                   }Ten}). Then (res = { One                   This. listarr=res.data.result.list//Remove Data A}, E =e); -         }, -         the         }, - Ready () { -           This. Getflistarr (); -    } +}

JSON data

Miscellaneous: The interface is not an array of statements, the list method takes out the interface data and then into the flist array, defined (num,name)

1 List () {2 this.http ({3 url: ' url ',4 method: ' GET ',5 data: {6 orgid:this. $route. Params.id,7 Devicegroup:1,8                     9                 }Ten }). Then (res = { One const result = Res.data.result; A This.flist.push ({num:result.devicecount,name: ' 1 '},{num:result.undaydevicecount,name: ' 2 '},{num:result.u Ndevicecount,name: ' 3 '}); - }, E = + e); -},

Vue interface Data (array) statement