Hola, en mi aplicación Vue tengo la oportunidad de crear varias personas:
<div v-for="newContent in temp" :key="newContent.id" @click="showId(newContent.id)" v-show="true"> <!-- Head of part personal data --> <h4 class="person" style="margin-left: 0.95vw">Person 1</h4> <!-- Enter Person Data --> <testmodul1></testmodul1> <div class="trash"> <button class="btn btn-outline-danger" @click="deletePerson()">Person löschen</button> </div> <hr /> </div>Si quiero agregar más personas, hay un botón que agrega más de estas entradas de personas:
<button class="btn btn-outline-secondary" @click="useIt()">Add more persons</button> useIt(){ this.temp.push({ id:this.id+=1 }) console.log(this.temp); }, data() { return { id:0, temp:[{ id:0, }] };},
Salida del método console.log en la consola (se hizo clic en el botón Agregar 2 veces):
Proxy {0: {…}, 1: {…}, 2: {…}} [[Handler]]: Object [[Target]]: Array(2) 0: {id: 0} 1: {id: 0} length: 2 [[Prototype]]: Array(0)Ahora el siguiente problema: Digamos por ejemplo que creamos 3 nuevas personas. Ahora reconozco que la segunda persona es falsa y quiero eliminarla. Cuando hago clic en la persona 2, quiero obtener el índice de matriz del elemento html. Ya he probado esto, pero realmente no funciona bien:
<div v-for="newContent in temp" :key="newContent.id" @click="showId(newContent.id)" v-show="true"> showId(index){ alert(index); }¿Hay alguna otra manera de encontrar el índice en la matriz del div html en el que hice clic?
Por favor, verifique la representación de la lista Vue.js.
Puede iterar a través de la matriz con el elemento y el índice de esta manera:
<li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li>Para tu caso:
<div v-for="(newContent, index) in temp" :key="newContent.id" @click="showId(index)" v-show="true">Puede definir la variable de índice en el bucle v-for. Me gusta
<div v-for="(person,index) in persons" :key="index"> {{index}} //which is index of current item </div>