Javascript 用道具观看家长不'；t在for循环期间更新

我有两个组件-

和

在我的根目录中有一个多维对象，我的组件用prop监视它

<div id="app">
   <my-component v-bind:account-types='accountTypes'>
   </my-component>
</div>

最后，accountTypes对象看起来像：

{ 1 : [ 'a', 'b', 'c' ], 2: ['e', 'a', 'm'] }

---

问题是您正在执行

v-for

，同时在同一元素上传递属性。您需要嵌套它们，以便

v-for

元素位于

上

更新：根据您在评论中所说的，您真正需要的是两个嵌套for循环

<!-- loop over account types -->
<div v-for="(accountId, values) in accountTypes">
  <h3>{{ accountId }}</h3>
  <!-- then loop over each individual value -->
  <ul v-for="value in values">{{ value }}</ul>
</div>

{{accountId}}
{{value}

---

您不需要使用组件。只有当您计划在应用程序的多个位置使用某些东西时，才需要组件。仅仅因为for循环多次重复相同的元素并不意味着您实际上需要一个组件；for循环中的模板就足够了。

有没有办法保持对象的概念？这些键表示帐号，数组是每个帐户的值：/I我已经更新了我的答案，因为问题不在于数据结构，而在于for循环和键分配在同一个元素上。我非常困惑。我准备了一把小提琴。我试图通过每个数组值实现for循环，但同时要知道它们的键您的意思是想要两个嵌套循环？使用

v-for

并在同一元素上设置

键

没有问题。如果/当您想要呈现多个非嵌套元素时，您将使用

模板

。尤其是使用小提琴，您将

帐户类型

错误地传递到

我的组件

。啊。我发现了问题。它与在根目录中初始化AccountType有关。我使用的是

accountTypes:{}

。我试着输入预定义的值，结果成功了

<template v-for="(account, index) in accountTypes">
  <grand-child-comp  :key="index"></grand-child-comp>
</template>

<!-- loop over account types -->
<div v-for="(accountId, values) in accountTypes">
  <h3>{{ accountId }}</h3>
  <!-- then loop over each individual value -->
  <ul v-for="value in values">{{ value }}</ul>
</div>