问题:如何从 html 元素中获取数组索引?

嘿在我的 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 数组中的索引?

解答

请检查Vue.js 列表渲染。

您可以使用元素和索引遍历数组,如下所示:

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