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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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!

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(