由於vue的for迴圈id並不嚴謹,提高id嚴謹性
阿新 • • 發佈:2020-11-01
如果後臺沒有傳入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>