嘿，在我的 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 個新人。現在我認識到，第二人稱是假的，我想洗掉它。當我單擊第 2 個人的時，我想獲取 html 元素的陣列索引。我已經嘗試過這個，但它并不能很好地作業：
<div v-for="newContent in temp" :key="newContent.id" @click="showId(newContent.id)" v-show="true">
showId(index){
alert(index);
}
有沒有其他方法可以找到我單擊的 html div 陣列中的索引？
uj5u.com熱心網友回復：
請檢查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">
uj5u.com熱心網友回復：
您可以在 v-for 回圈本身中定義索引變數。喜歡
<div v-for="(person,index) in persons" :key="index">
{{index}} //which is index of current item
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375538.html
標籤：javascript html Vue.js
上一篇：我如何更改函式的資料值？