1. 程式人生 > 實用技巧 >由於vue的for迴圈id並不嚴謹,提高id嚴謹性

由於vue的for迴圈id並不嚴謹,提高id嚴謹性

如果後臺沒有傳入id,我們拿到的資料沒有id修改等操作不方便,如何拿到id呢

https://github.com/dylang/shortid提供唯一id

外掛的引入和使用:

<template>
<div>
 <h3>遍歷陣列</h3>
<ul>
<li v-for="(person,index) in persons " key="personsKeys[index]"> 
id: {{personsKeys[index]}}<br/>
 姓名 : {{person.name}},
年齡 : {{person.age}},
性別 : {{person.sex}},


</li>

</ul>

</div>
</template>
<script>
import shortId from 'shortid'
export default{
    name:"ifAndShow",
    data(){
        return {
            persons:[
                {name:'張三',age:18,sex:'男'},
                {name:'張三2',age:128,sex:'男'},
                {name:'張三3',age:138,sex:'男'},
                {name:'張三4',age:148,sex:'男'},
                {name:'張三5',age:158,sex:'男'},
                {name:'張三6',age:168,sex:'男'},
                {name:'張三7',age:178,sex:'男'},

                
                ],

                personsKeys:[]
        }
    },
    //生命週期方法
    mounted(){
        this.personsKeys=this.persons.map(v=>shortId.generate())
    }
}
</script>
<style scoped>
</style>