How to use v-for to render an array of dynamic components in vuejs?

Question

I have a page where a user gets to decide between different products, here is the list in my View page:

items: [
        {
          id: 1,
          name: "Product_1",
          children: [
            { name: "Order", id: "62c40e2faba699b309005102", popup: "order" },
            { name: "Feedback", id: "62c40e26aba699b309005100", popup: "feedback" },
          ],
        },
        {
          id: 2,
          name: "Product_2",
          children: [
            { name: "Pre-Order", id: "62c404228ce80aac470a1339", popup: "preOrder"},
          ],
        },

When they do, different form block components should appear in a popup, here is the list of the different combinations in a different file:

computed: {
    order(){
      return [
        {name : "personal info" , component:"PersonalInfo"},
        {name : "credit card" , component:"CreditCard"},

      ]
    feedback(){
      return [
        {name : "personal info" , component:"PersonalInfo"},
        {name : "feedback text" , component:"FeedbackText"},

      ]
    preOrder(){
      return [
        {name : "email" , component:"Email"},
        {name : "order details" , component:"OrderDetails"},

      ]
},

So if they want to order product one: they should see the form popups asking them to enter personal info and credit card info,

if they want to give feedback to product 1: they should see the form popups asking them to enter personal info and feedback input text,

if they want to order product 2, they can only preorder it yet so they should enter their email info and give details about the preorder.

When I hard code one of the keys like this, it works, and I have the 2 components called by feedback() that render.

<li v-for="item in feedback" v-bind:key="item.name">
    <span class="item-title">{{item.name}}</span>
       <component :is="item.component"  />
</li>

However, when I try to change the v-for for a dynamic value that changes based on which product the user clicks on, I get an error (says popup is not defined). :

<li v-for="item in items.children.popup" v-bind:key="item.name">
    <span class="item-title">{{item.name}}</span>
       <component :is="item.component"  />
</li>

The items are passed as a prop from the parent page to the child component like this:

in parent:
<popUps
      v-if="show"
      :show="show"
      :items="items"
      @close="show = false"
    ></popUps>

in child: 
props: ["show", "items"],

So I'm not sure how to write the v-for part to access the functions order(), feedback() or preorder() and then render the component accordingly.

SIHEM BOUHENNICHE · Accepted Answer · 2022-08-12 13:28:15Z

1

The mistake is made when you've tried to loop on 'item.children.popup', which is undefined (item.children is an array and not an object). You should update your code like that :

1 - Put your computed variables in one computed variable called componentsDeclaration :

computed: {
    componentsDeclaration(){
      return { 
          order : [
               {name : "personal info" , component:"PersonalInfo"},
               {name : "credit card" , component:"CreditCard"},
          ],
          feedback : [
               {name : "personal info" , component:"PersonalInfo"},
               {name : "feedback text" , component:"FeedbackText"},
          ],
          preOrder : [
               {name : "email" , component:"Email"},
               {name : "order details" , component:"OrderDetails"},
          ]
      }
    }
},

2 - Access to the popup content by using 'componentsDeclaration' :

<li v-for="item in items.children" v-bind:key="item.name">
    <div v-for="subItem in componentsDeclaration[item.popup] v-bind:key="subItem.name">
           <span class="item-title">{{subItem.name}}</span>
           <component :is="subItem.component"  />
    </div>
</li>

edited Aug 12, 2022 at 13:28

answered Aug 12, 2022 at 12:47

SIHEM BOUHENNICHE

4365 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user16779293 Over a year ago

Thank you, I think I'm missing one last step to make it work and it's passing items.children from the parent component to the child. I've edited my post to show how I do it but I don't think the v-for is accessing it. Is the problem here?

SIHEM BOUHENNICHE Over a year ago

In fact , the problem is when you've tried to loop on items.children.popup which is undefined, because item.children is an array and you should access to it's elements by index, so if you want for example to access to value of popup of the the first child you should use : items.children[0].popup

Collectives™ on Stack Overflow

How to use v-for to render an array of dynamic components in vuejs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related