VueJS V-For 和 bootstrap 一副卡片

Question

晚上好，
我已经处理一个问题大约一个小时左右，我对 VueJS（以及一般的前端开发）有点陌生。

我正在尝试让一副纸牌循环并反对（使用 Bootstrap-Vue）。当我手动 post 时，它们中的卡片以 3 组正确对齐。问题是当我遍历 json 对象时，它似乎创建了一个实心列。

Ill post 我的代码（不要介意测试部分中的一些名称，我将在完成后将其重构为一个 comp），以防有人想看一看。我将进一步研究它并进行更新，以防我比别人先弄清楚。

提前谢谢你

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

Answer 1

很难说这是否是唯一的问题，因为我没有你的文件，但有一件事立即突出：

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

:key 必须是唯一的字符串值。由于您在该行下方使用 recipes.name，因此我假设 recipes 是一个对象。 Vue 将对此调用 toString()，对于任何对象，无论内容如何，这将始终导致 "[object Object]" 的字符串。

我敢打赌 使用了 [object Object] 的相同键，所以 Vue 只会从该循环中创建一个对象。

尝试使用像 :key="recipes.name" 这样的唯一值（假设它是唯一的，理想情况下你有一个 id 字段）

至少要让它工作，您可以使用 index 作为密钥，但这与根本不使用密钥基本相同：

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

编辑:

只是偷看 Vue source code，看起来您应该会看到关于此的警告。如果有的话，解决那里的其他警告可能会很好。

VueJS V-For 和 bootstrap 一副卡片

VueJS V-For and bootstrap Cards in a Deck

javascript

vue.js

v-for