Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案
更新時(shí)間：2024年03月26日 15:03:28 作者：暴富的im
這篇文章主要介紹了Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
此時(shí)的groups是props傳過來的參數(shù)，vue3在模板里面使用props也需要加props。
import { defineProps} from 'vue'
const props = defineProps({
groups: {
type: Array ,
default: null
}
})1.此時(shí)需要定義一個(gè)ts文件對(duì)group進(jìn)行定義類型即可
/**
* type.ts
*/
export type IGroup = { type不能忘記寫
name: string
color: string
count: number
status: string
icon: string
headers: [{ name: string; key: string; format: any }]
data: any[] 這里應(yīng)該還需要細(xì)加定義，但是我偷懶了
operators: [
{
name: string
icon: string
handle: any
}
]
}2.在組件中引入該類型
import { defineProps, type PropType } from 'vue'
import type { IGroup } from '@/api/types' PS：這里引入要寫前面type
const props = defineProps({
groups: {
type: Array as unknown as PropType<[IGroup]>, 需要先定義unknown
default: null
}
})到此這篇關(guān)于Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的文章就介紹到這了,更多相關(guān)Props傳參v-for報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue 中常用操作數(shù)組的方法(forEach()和reduce())
文章介紹了JavaScript中常用的操作數(shù)組方法,包括forEach()和reduce(),forEach()用于遍歷數(shù)組并對(duì)每個(gè)元素執(zhí)行操作,而reduce()則用于遍歷數(shù)組并進(jìn)行累加等迭代操作,感興趣的朋友一起看看吧2025-03-03
項(xiàng)目開發(fā)中因?yàn)閡i設(shè)計(jì)常常需要修改vue常用的組件庫（element,antD等等）,這就需要用到樣式穿透,下面這篇文章主要給大家介紹了關(guān)于Vue3樣式滲透之deep()為什么無效的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue?watch中監(jiān)聽值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽值的變化,判斷后修改值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue.js 中的條件渲染指令，Vue.js 中的條件渲染指令可以根據(jù)表達(dá)式的值，來決定在 DOM 中是渲染還是銷毀元素或組件。本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
快速解決Vue、element-ui的resetFields()方法重置表單無效的問題
這篇文章主要介紹了快速解決Vue、element-ui的resetFields()方法重置表單無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3 style CSS 變量注入的實(shí)現(xiàn)
本文主要介紹了Vue3 style CSS 變量注入的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟
這篇文章主要介紹了Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識(shí)庫
關(guān)于Vue.js 2.0 的 Vuex 2.0你需要更新的知識(shí)庫，感興趣的小伙伴們可以參考一下2016-11-11
在?Vue?中，命名規(guī)范是一個(gè)非常重要的話題，駝峰命名和短橫線分割命名都有其各自的優(yōu)缺點(diǎn)和適用場景，開發(fā)者需要根據(jù)實(shí)際情況進(jìn)行選擇，這篇文章主要介紹了Vue?中駝峰命名與短橫線分割命名作用及區(qū)別介紹,需要的朋友可以參考下2023-05-05