Creé una interfaz con el siguiente código:
export interface ISubcategories { subCategoryTopic: string; subCategoryImageURL: string; subCategoryImage: ISubcategoryImages[]; } export interface ISubcategoryImages { podcastImageURL: string; videoImageURL: string; articleImageURL: string; } export interface ICategories { categoryTopic: string; subCategory: ISubcategories[]; }Lo llamé en la sección de datos de mi código vuejs con:
categoryData: { categoryTopic: "" as string, subCategory: [] as Array<ISubcategories>, },Sin embargo, cuando agrego el siguiente código al cuadro de texto donde quiero que estén los datos, aparece este error :
_vm.categoryData.subCategory.subCategoryImage no está definido.
Qué tengo que hacer ?
v-model="categoryData.subCategory.subCategoryImage.podcastImageURL"Una observación : como subCategory & subCategoryImage en la interfaz ISubcategories se define como una matriz. No puede acceder a su objeto directamente con notación de dot(.) . Puede acceder a los elementos a través de índice o por iteración.
Por ejemplo:
<div v-for="(subCat, index) in categoryData.subCategory" :key="index"> <div v-for"(imageUrl, i) in subCat.subCategoryImage" :key="i"> <input v-model="imageUrl.podcastImageURL"/> </div> </div>