javascript - 甲板上的 VueJS V-For 和引导卡

Question

晚上好，
我已经在一个问题上工作了大约一个小时左右，我对 VueJS(以及一般的前端开发)有点陌生。

我试图让一副卡片循环遍历并对象(使用 Bootstrap-Vue)。 当我手动将卡片张贴在其中时，它们以 3 为一组正确对齐。问题是当我迭代 json 对象时，它似乎创建了一个实心列。

我将发布我的代码(不要介意测试部分中的一些名称，我将在完成后将其重构为一个组件)以防有人想看一下。我将进一步研究它并更新，以防我在别人之前弄清楚。

预先感谢您

  <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 作为 key ，但这本质上与根本不使用 key 相同:

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

编辑:

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