VueJS V-For and bootstrap Cards in a Deck

Good Evening,
I've been working on a issue for about an hour or so, I am kinda new to VueJS (and front end Dev in general).

I am trying to have a deck of cards looping through and object (using Bootstrap-Vue). When I manually post the cards in they align correctly in groups of 3. the issue is when I iterate through the json object it seems to create one solid column.

Ill post my code (dont mind some of the names this is in a test section, im going to refactor it into a comp once its complete) in case someone wants to take a look. I am going to poke at it some more and Update in case I figure it out before someone.

Thank you in advance

  <div class="about">
    <h1>Dawning Recipes</h1>
    <br />
    <b-container>
      <b-card-group deck v-for="recipes in data.recipes" :key="recipes">
        <b-card
          bg-variant="dark"
          :header="recipes.name"
          class="text-center"
          style="max-width: 23rem;"
        >
          <b-row>
            <b-col sm="auto">
              <b-img thumbnail fluid :src="recipes.icon" :alt="recipes.name" />
            </b-col>
            <b-col class="text-left">
              <b-list-group>
                <b-list-group-item
                  variant="dark"
                  v-for="ingredient in recipes.ingredients"
                  :key="ingredient"
                >{{ingredient}}</b-list-group-item>
              </b-list-group>
            </b-col>
          </b-row>
          <b-row>
            <b-row>
              <b-col>
                <b-card-text class="text-left ml-2 mt-3 mr-2">{{recipes.delivery}}</b-card-text>
              </b-col>
            </b-row>
          </b-row>
        </b-card>
      </b-card-group>
    </b-container>
  </div>
</template>

<script>
import data from "../data/destiny/dawning.json";
export default {
  data() {
    return {
      data: data
    };
  }
};
</script>```

Solution

Hard to say if this is the only issue, since I don't have your files, but one thing immediately sticks out:

 <b-card-group deck v-for="recipes in data.recipes" :key="recipes">

:key has to be a unique string value. Since you're using recipes.name below that line, I assume recipes is an object. Vue will call toString() on this, which will always result in a String of "[object Object]", for any object, no matter the contents.

I bet the same key of [object Object] is being used, so Vue is only creating one object there from that loop.

Try using a unique value like :key="recipes.name" (assuming that is unique, ideally you have an id field)

At the very minimum to get it working, you could use index as a key, but that is essentially the same as not using a key at all:

 <b-card-group deck v-for="(recipes, index) in data.recipes" :key="index">

Edit:

Just peeking at the Vue source code, it looks like you should be seeing a warning about this. It might be good to work through other warnings in there, if any.