时间戳

首页 > 解决方案 > 如何告诉 Vuejs 查看子数据条目

javascript - 如何告诉 Vuejs 查看子数据条目

问题描述

我正在构建一个网站，将我的数据保存在 .js 文件中，并通过 mapstate 将其导入我的 vuejs 文件中。

我的产品部分有两张彼此相邻的卡片。我目前的问题是，在我的 .js 文件中，我希望 vue 在数据对象中查找数据对象，因此如果有超过 2 个对象，那么它将创建第三张卡。

这是我用来调用数据的 .js 文件中的产品部分。

"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"
                    }
                ]
            },

        ],

我的 vuejs 文件中的我的产品部分。

  <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>

目前，当我按照上面的方式进行操作时，它根本没有显示卡片。

编辑*** 我只复制了一小部分而不是整个内容。我今天的大脑还在睡着。。添加了整个部分

如果有人能启发我的愚蠢，那就太好了。

标签： javascriptvue.js

解决方案

您需要在 v-card 属性中使用 v-for。

 <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.

提示：不要使用索引作为键，而是将 id 添加到每个产品并设置该属性：key="product.id"。在可能的情况下，这是更好的做法，在您的情况下也是如此。通过这样做，您可以获得更好的功能（因为您可以使用其 id 获取该特定产品），并且您可以在需要时添加转换组。

推荐阅读