I created an interface with the code below:
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[];
}
I called it in the data section of my vuejs code with:
categoryData: {
categoryTopic: "" as string,
subCategory: [] as Array<ISubcategories>,
},
However, when I do add the code below to the textbox where I want the data to be, I get this error :
_vm.categoryData.subCategory.subCategoryImage is undefined.
What should I do ?
v-model="categoryData.subCategory.subCategoryImage.podcastImageURL"
One observation : As subCategory & subCategoryImage in interface ISubcategories is defined as an array. You can not access it's object directly with dot(.) notation. You can access elements via index or by iteration.
For ex :
<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>