How to tell Vuejs to look in a child data entry

Question

I'm building a website where I'm saving my data in a .js file and importing it into my vuejs files via mapstate.

I have two cards next to each other in my products section. My problem currently is that in my .js file I want vue to look for a data object within a data object so if there is more than 2 objects then it will create a 3rd card.

here is my products section in my .js file that I use to call upon my data.

"products": [{
                // Everything to do with the Prodcuts section

                //Page heading
                "pageHeading": "OUR PRODUCTS",

                ProductCards: [
                    //Everything to do with the first card
                    {
                        "firstCardImage": "assets/companyname.png",
                        //Heading text 
                        "firstCardHeading": "Card heading text here",
                        //The Card body text 
                        "firstCardTextFirstSection": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum maiores modi quidem veniam, expedita quis laboriosam, ullam facere adipisci, iusto, voluptate sapiente corrupti asperiores rem nemo numquam fuga ab at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum maiores modi quidem veniam, expedita quis laboriosam, ullam facere adipisci, iusto, voluptate sapiente corrupti asperiores rem nemo numquam fuga ab at.",
                        "firstCardTextSecondSection": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum maiores modi quidem veniam, expedita quis laboriosam, ullam facere adipisci, iusto, voluptate sapiente corrupti asperiores rem nemo numquam fuga ab at.",
                        firstCardButton: "CLICK HERE TO FIND OUT MORE",
                        "firstCardButtonColor": "lightbrwn",
                    }, {
                        //Everything to do with the second card
                        "secondCardImage": "assets/companyname.png",
                        //Heading text 
                        "secondCardHeading": "Card heading text here",
                        //The Card body text 
                        "secondTextFirstSection": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum maiores modi quidem veniam, expedita quis laboriosam, ullam facere adipisci, iusto, voluptate sapiente corrupti asperiores rem nemo numquam fuga ab at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum maiores modi quidem veniam, expedita quis laboriosam, ullam facere adipisci, iusto, voluptate sapiente corrupti asperiores rem nemo numquam fuga ab at.",
                        "secondCardTextSecondSection": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum maiores modi quidem veniam, expedita quis laboriosam, ullam facere adipisci, iusto, voluptate sapiente corrupti asperiores rem nemo numquam fuga ab at.",
                        SecondCardButton: "CLICK HERE TO FIND OUT MORE",
                        "SecondCardButtonColor": "lightbrwn"
                    }
                ]
            },

        ],

My products' section in my vuejs file.

  <template >
  <div class="grey lighten-2 py-10 pa-12">
    <div v-for="(item, i) in products" :key="i">
      <div class="py-2">
        <h1 class="text-center font-weight-bold display-2">
          {{ item.pageHeading }}
        </h1>
      </div>
      <v-container>
        <v-row justify="center" align="center">
          <v-col>
            <div data-aos="fade-right">
              <v-hover v-slot:default="{ hover }" open-delay="200">
                <v-card
                  :elevation="hover ? 16 : 0"
                  class="mx-auto"
                  max-width="868.5"
                >
                  <v-row align="center" justify="center"
                    ><v-col cols="4">
                      <v-img
                        width="250"
                        contain
                        background-position="center"
                        :src="cardImages(item.ProductCards.firstCardImage)"
                      >
                      </v-img
                    ></v-col>
                  </v-row>
                  <v-row align="center" justify="center">
                    <h3>{{ item.ProductCards.firstCardHeading }}</h3>
                    <v-col class="text-center" cols="10">
                      <p>
                        {{ item.ProductCards.firstCardTextFirstSection }}
                      </p>

                      <p>
                        {{ item.ProductCards.firstCardTextSecondSection }}
                      </p>
                    </v-col>
                  </v-row>
                  <v-row
                    ><v-col>
                      <div class="ma-5">
                        <v-btn
                          dark
                          tile
                          depressed
                          :color="item.firstCardButtonColor"
                        >
                          <span>
                            {{ item.ProductCards.SecondCardButton }}</span
                          ></v-btn
                        >
                      </div>
                    </v-col>
                  </v-row>
                </v-card>
              </v-hover>
            </div>
          </v-col>
          <v-col>
            <div data-aos="fade-left">
              <v-hover v-slot:default="{ hover }" close-delay="200">
                <v-card
                  :elevation="hover ? 16 : 0"
                  class="mx-auto"
                  max-width="868.5"
                >
                  <v-row align="center" justify="center"
                    ><v-col cols="4">
                      <v-img
                        width="250"
                        contain
                        background-position="center"
                        :src="cardImages(item.ProductCards.secondCardImage)"
                      >
                      </v-img
                    ></v-col>
                  </v-row>
                  <v-row align="center" justify="center">
                    <h3>{{ item.ProductCards.secondCardHeading }}</h3>
                    <v-col class="text-center" cols="10">
                      <p>
                        {{ item.ProductCards.secondTextFirstSection }}
                      </p>

                      <p>
                        {{ item.ProductCards.secondCardTextSecondSection }}
                      </p>
                    </v-col>
                  </v-row>
                  <v-row
                    ><v-col>
                      <div class="ma-5">
                        <v-btn
                          dark
                          tile
                          depressed
                          :color="item.ProductCards.SecondCardButtonColor"
                        >
                          <span>
                            {{ item.ProductCards.SecondCardButton }}</span
                          ></v-btn
                        >
                      </div>
                    </v-col>
                  </v-row>
                </v-card>
              </v-hover>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </div>
</template>

Currently, it's not showing the cards at all when I do it with the way I did above.

Edit*** I copied only a small section instead of the whole thing. My brain today is still asleep.. Added the whole section

If anyone can enlighten my stupidity that would be great.

Answer 1

You need to use v-for in v-card attributes.

 <v-container>
        <v-row justify="center" align="center">
          <v-col>
            <div data-aos="fade-right">
              <v-hover v-slot:default="{ hover }" open-delay="200">
                <v-card
                  v-for="(product, index) in item.ProductCards"
                  :key="index"
                  :elevation="hover ? 16 : 0"
                  class="mx-auto"
                  max-width="868.5"
                >
                 // your template codes go here.
                 // instead of item.ProductCards you should use product
                 // f.e. item.ProductCard.firstCardImage should be product.image
                 // So you need to change the key names to image, heading, etc in ProductCards object
                </v-card>
               // close other tags.

Tip: Instead of using index as key, add id to each product and make that attribute :key="product.id". This is better practice when it's possible, and in your case it's. By doing so you can have way better functionality (since you can grab that particular product with its id), and you can add transition-group if you need it.