Hi,
I want to reuse the widgets in a v-for loop, but when i place it in a loop (i have used Widget7.vue), the dropdown (Dropdown3.vue) isn't opening. When i create it separate without using v-for it's opening.
How should I open the menu dropdown?
i couldn't paste my code, because i'm getting errors.
Hi,
With i in 10 it's working but when I pass an array of objects, it's not working;
<Widget7 v-for="(product_category, i) in product_categories"
widget-classes="card-xl-stretch mb-5 mb-xl-8" :key="i"></Widget7>
const product_categories = computed(() => {
return preReqs.product_categories ?? [];
});
[
{
"id": 1,
"name": "Auto",
"description": "description",
"is_active": 1,
"created_at": "2022-10-31T10:48:36.000000Z",
"updated_at": "2022-10-31T10:48:36.000000Z",
"books_count": 4,
"products_count": 9,
"theory_course_sets_count": 9,
"lesson_cards_count": 3,
},
{
"id": 2,
"name": "Theorie",
"description": "description",
"is_active": 1,
"created_at": "2022-10-31T10:48:36.000000Z",
"updated_at": "2022-10-31T10:48:36.000000Z",
"books_count": 1,
"products_count": 4,
"theory_course_sets_count": 9,
"lesson_cards_count": 3
},
{
"id": 3,
"name": "Motor",
"description": "description",
"is_active": 1,
"created_at": "2022-10-31T10:48:36.000000Z",
"updated_at": "2022-10-31T10:48:36.000000Z",
"books_count": 1,
"products_count": 9,
"theory_course_sets_count": 9,
"lesson_cards_count": 3,
}
]
It works the same way with the static array I assume that you are fetching this array asynchronously from your API since we are initializing the menu component only on the page first load, elements that get rendered asynchronously might not work. Could you please try to reinitialize MenuComponent when the data is received?
In your .then(()=>{})
function run the following code.
MenuComponent.reinitialization();
correct, thanks for the tip. now it works perfect!
Glad to hear that. All the best with your project!
Hi,
Thank you for contacting our support.
If you haven't modified our code then menus should work fine.
I checked and tried to display 10 Widget7 instances and the menus on every instance are working.
<Widget7 v-for="i in 10" className="h-xl-100" :key="i" />