在Vue中,循環時可以使用v-for指令來實現,但并不是所有的循環都需要id。有些情況下,我們希望循環的數組或對象中并沒有id字段,這時該如何處理呢?
<div v-for="(item, index) in items">
{{ item }}
</div>
如上代碼所示,我們使用v-for指令循環數組items,并利用index變量來獲取當前項的下標,但items并沒有id字段。在這種情況下,我們可以使用index來代替id。
除此之外,我們也可以在循環時給每一項手動添加一個id字段。例如,我們可以使用Array.prototype.map()方法來處理原數組,將每一項轉換成帶有id字段的對象。
data() {
return {
items: ['apple', 'banana', 'orange'],
};
},
computed: {
itemObjects() {
return this.items.map((item, index) =>({
id: index,
name: item,
}));
},
}
如上代碼所示,我們利用computed屬性來返回處理后的對象數組itemObjects,其中每一項都有id和name字段,方便用于循環。
另一種處理方式是,在循環內部利用計算屬性或方法來計算每一項的id。例如,我們可以在循環內部計算出每一項的hash值,作為該項的id。
<div v-for="(item, index) in items" :key="hash(item)">
{{ item }}
</div>
…
methods: {
hash(value) {
const str = value.toString();
let sum = 0;
for (let i = 0; i < str.length; i += 1) {
sum += str.charCodeAt(i);
}
return sum;
},
},
如上代碼所示,我們在v-for指令中使用hash(item)作為key值,而hash(value)方法用于計算value的hash值。該方式可以保證每一項都有唯一的key值,不必擔心出現重復。
總的來說,雖然Vue循環時經常會用到id字段,但并不是所有情況下都需要它。我們可以使用其他的方式來處理,保證循環的正確性和穩定性。
下一篇vue畫面好暗