VueJS V-For和引导卡在甲板上 Download


晚上好，
我已经处理了大约一个小时左右的时间，对于VueJS（以及前端开发人员）来说，我还是一个新手。

我试图让一堆纸牌遍历对象（使用Bootstrap-Vue）。 当我手动张贴卡片时，它们以3组为一组正确对齐。问题是当我遍历json对象时，似乎创建了一个实心列。

如果有人想看一下，我会发布我的代码（不要介意在测试部分中使用的某些名称，一旦完成，我会立即将其重构为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>```

1 个答案:

答案 0 :(得分：0)

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

 <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，看来您应该会看到关于此的警告。如有可能，通过那里的其他警告来解决可能会很好。



Similar searches