How to open menu dropdown in vue from v-for?
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.
Replies (5)
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" />Can you please try to attach your code in the comments below?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
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>product_categories
I am initializing this in
const product_categories = computed(() => {
return preReqs.product_categories ?? [];
});preReqs.product_categories is the response from backend. when i print product_categories, i'm getting the following array:
[
{
"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();Regards,
Lauris Stepanovs,
Keenthemes Support Team
correct, thanks for the tip. now it works perfect!
Glad to hear that. All the best with your project!
