vue中forEach循環(huán)的使用講解

更新時(shí)間：2022年06月13日 14:47:08 作者：huayang183

這篇文章主要介紹了vue中forEach循環(huán)的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

forEach循環(huán)的使用

//data為集合 
data.forEach(function(item, index) {
            //item 就是當(dāng)日按循環(huán)到的對(duì)象
            //index是循環(huán)的索引，從0開始
})

使用forEach報(bào)錯(cuò),this指向問題

getCrumbs(){
? ? let crumbs = JSON.parse(localStorage.getItem( "crumbs" ));?
? ? //[Vue warn]: Error in created hook: "TypeError: Cannot set property 'manageClass' of undefined" 報(bào)錯(cuò)
? ? crumbs.forEach(function(item){ ? ? ? ? ??
? ? ? ? console.log(item); ? ? ? ? ? ? ? ? ? ?
? ? ? ? if (item.name === "staffInfo") {
? ? ? ? ? ? this.manageClass = item.manageClass
? ? ? ? ? ? this.infoClass = item.infoClass;?
? ? ? ? }
? ? })
? ??
}, ? ?

crumbs.forEach(item => {
? ? console.log(item); ? ? ? ? ? ? ? ? ? ?
? ? if (item.name === "staffInfo") {
? ? ? ? this.manageClass = item.manageClass
? ? ? ? this.infoClass = item.infoClass;?
? ? }
})

每一個(gè)用function聲明的函數(shù)在調(diào)用時(shí)都會(huì)在函數(shù)內(nèi)創(chuàng)建自己的this。this一般是函數(shù)所操作的對(duì)象。如果沒有操作的對(duì)象。this在"use strict";嚴(yán)格模式下是 undefined，非嚴(yán)格模式下是 window。
也就是說，function聲明的函數(shù)總是有自己的this。從而遮蓋外層作用域中的this。

如果用es6的箭頭函數(shù)()=>{}就沒有自己的this。在箭頭函數(shù)()=>{}中訪問this，是訪問外層作用域中的this

 getCrumbs(){
    let crumbs = JSON.parse(localStorage.getItem( "crumbs" )); 
    //[Vue warn]: Error in created hook: "TypeError: Cannot set property 'manageClass' of undefined" 報(bào)錯(cuò)
    // crumbs.forEach(function(item){
    crumbs.forEach(item => {
        console.log(item);                    
        if (item.name === "staffInfo") {
            this.manageClass = item.manageClass
            this.infoClass = item.infoClass; 
        }
    })
    //  或者使用for循環(huán)
    for (let i = 0; i < crumbs.length; i++) {
        if (crumbs[i].name === "staffInfo") {
            this.manageClass = crumbs[i].manageClass
            this.infoClass = crumbs[i].infoClass; 
        }                  
    }
},

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中form表單禁用專用組件介紹
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
vue如何自定義組件v-model
這篇文章主要介紹了vue如何自定義組件v-model問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
如何為老vue項(xiàng)目添加vite支持詳解
Vite是一個(gè)開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項(xiàng)目添加vite支持的相關(guān)資料,需要的朋友可以參考下
2021-09-09
Vue中使用 setTimeout() setInterval()函數(shù)的問題
這篇文章主要介紹了Vue中使用 setTimeout() setInterval()函數(shù)的問題 ,需要的朋友可以參考下
2018-09-09
vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
Vue新的狀態(tài)管理庫(kù)Pinia入門教程
Pinia不但支持Vue3，同時(shí)還支持Vue2，本文主要介紹了Vue新的狀態(tài)管理庫(kù)Pinia入門教程，具有一定的參考價(jià)值，感興趣的可以了解下
2022-02-02
vue路由history模式頁(yè)面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁(yè)面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
VUE+ElementUI下載文件的幾種方式(小結(jié))
本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹
這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件
這篇文章主要為大家詳細(xì)介紹了如何基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01