在vue3頁面中想要遍歷在data中定義的數(shù)組，沒有做JSON數(shù)據(jù)處理，然后用forEach方法就一直報錯......網(wǎng)上查找了很多相關(guān)錯誤，有些是說命名敏感，還有數(shù)據(jù)沒做JSON轉(zhuǎn)化，或是要用異步處理.......試了各種方法發(fā)現(xiàn)都不能解決。不過從下面報錯可以看出就是我的數(shù)組類型不符合forEach的標準，所以才不能遍歷，可是嘗試定義標準數(shù)組還是出現(xiàn)這種錯誤。
const numberArr = ref(["1","2","3","4"])
numberArr.forEach((item, index) => {
console.log(item);
})嘗試了很多遍，試著定義數(shù)組不使用ref或是reactive去處理就成功了。但我不是很清楚vue3對這個ref等方法的處理導致自定義的數(shù)組不能夠進行遍歷。
const numberArr = ["1","2","3","4"]
//刪除了ref就成功了
numberArr.forEach((item, index) => {
console.log(item);
})反正如果是前端做假數(shù)據(jù)就可以直接在方法中定義，如果是接口導入數(shù)據(jù)就要檢查一下接口傳入的數(shù)據(jù)格式，一般接口數(shù)據(jù)傳來的都是處理好的JSON數(shù)據(jù)，不會出現(xiàn)這種離譜的報錯。
如果有大佬清楚這個原理，歡迎下面留言。文章來源：http://www.zghlxwxcb.cn/news/detail-515940.html
這個問題后面有去問朋友，forEach不能使用很有可能跟vue的屬性有關(guān)，如果是ref、toRef或是導出來的假數(shù)據(jù)，想要使用forEach方法必須加.value才能對里面的值進行遍歷。因為vue會封裝我們的數(shù)據(jù)，forEach不加.value格式就不對，遍歷不到值。但是如果是reactive（[數(shù)組]），就不需要加.value就可以遍歷。文章來源地址http://www.zghlxwxcb.cn/news/detail-515940.html
到了這里，關(guān)于vue3中使用ForEach報錯Uncaught TypeError: xxxx.forEach is not a function的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Vue]常見的循環(huán)處理數(shù)組方法：forEach some map filter every find等方法](https://imgs.yssmx.com/Uploads/2024/02/497580-1.png)
