vue realizes the id operation of dynamically assigning value to id and clicking on the event to obtain the currently clicked element

: id binding: id= "'a_' +index"

The output id is a_0 and a_1. . . . .

 <div v-for="(item,index) in list" :key="index" >
 <div :id="'a'+index" @click="b(index)"> Ha ha ha </div>
 </div>

Then you can get the corresponding id in the instance of vue

b(index){
    this.list.splice(index,1);
}

Or

< div @click="open($event)" id="1" > Add < div >

open(a){
  console.log(a.currentTarget.id)//1
}

Additional knowledge: How to dynamically insert DOM nodes in Vue?

Problem description:

Exclude the insertion of data, if there are two groups of data, each two groups of 1 object, then if you want to load the next 1 object should be how to insert?

2017/09/14 Last night, in my sleep, I thought of a solution in a trance, which is actually very simple, but I didn't think about it before.

Solution:

1. This requirement was realized by rendering before inserting through artTemplate plug-in.

2. In Vue, the data is changed before rendering

3. In this case, the two groups of data in the problem are manually assembled into an array, and then inserted dynamically, and the problem will be solved easily

Flow: If there are two arrays of A and B to render

C = [
{
 ' A': [],
 ' B': []
}
]

Assemble into an C array, then dynamically insert the C array each time new data is retrieved, then loop render the C array in the DOM structure, bingo!