javascript - 如何从html元素获取数组索引？

Question

嘿，在我的 Vue 应用程序中，我有机会创建几个人:

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

如果我想添加更多人，有一个按钮，可以附加更多这些人输入:

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

},

console.log方法在控制台的输出(点击添加按钮2次):

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

现在是以下问题:假设我们创建了 3 个新人。现在我认识到，第二个人是假的，我想删除它。当我点击 person 2 时，我想获取 html 元素的数组索引。我已经试过了，但效果不是很好:

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

showId(index){
  alert(index);
  }

有没有其他方法可以找到我点击的 html div 数组中的索引？

Answer 1

请检查Vue.js list rendering .

您可以像这样使用元素和索引遍历数组:

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

针对您的情况:

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