How to get array index from html element?

Question

Hey In my Vue application I have the opportunity to create several persons:

<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>

If I want to add more persons, there is a button, which appends more of these person inputs:

<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,
  }]
};

},

Output of the console.log method in the console (clicked the add button 2 times):

Proxy {0: {…}, 1: {…}, 2: {…}}
[[Handler]]: Object
[[Target]]: Array(2)
0: {id: 0}
1: {id: 0}
length: 2
[[Prototype]]: Array(0)

Now the following problem: Let's say for example we created 3 new persons. Now I recognize, that the second person is false and I want to delete it. When I click on the of person 2 I want to get the array index of the html element. I have already tried this, but it does not really work well:

<div v-for="newContent in temp" :key="newContent.id" @click="showId(newContent.id)"  v-show="true">

showId(index){
  alert(index);
  }

Is there an other way how I could find out the index in the array of the html div I clicked?

"does not really work well" is meaning what exactly? What is alerted? — user5734311
– user5734311, Commented Dec 7, 2021 at 9:09

tony19 · Accepted Answer · 2022-07-15 21:22:24Z

4

Please, check Vue.js list rendering.

You can iterate through array with both element and index like this:

<li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
</li>

For your case:

<div v-for="(newContent, index) in temp" :key="newContent.id" @click="showId(index)" v-show="true">

edited Jul 15, 2022 at 21:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 7, 2021 at 9:12

Xeelley

1,1582 gold badges9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mak Sr · Accepted Answer · 2021-12-07 09:12:36Z

3

You can define index variable in v-for loop itself. Like

<div v-for="(person,index) in persons" :key="index">
    {{index}} //which is index of current item
</div>

answered Dec 7, 2021 at 9:12

Mak Sr

3034 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to get array index from html element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related