Vue.js + Firebase - 如何显示深层嵌套数据库

Question

这是我的第一个问题，因为这个 让我发疯。 我在摆弄firebase和vue.js，尝试使用 来循环我的数据库（键值）构造。

下面是我的出口JSON：

{ 
    "city":{ 
     "new york":{ 
     "zipcode":{ 
      "10039":{ 
       "street":{ 
        "W 152nd St":[ 
        "263", 
        "250", 
        "21" 
        ] 
       } 
      }, 
      "02116":{ 
       "street":{ 
        "W 155nd St":[ 
        "3", 
        "25", 
        "21" 
        ] 
       } 
      } 
     } 
     }, 
     "boston":{ 
     "zipcode":{ 
      "02116":{ 
       "street":{ 
        "Berkeley St":[ 
        "161", 
        "65", 
        "13" 
        ] 
       } 
      } 
     } 
     } 
    } 
} 

还有什么要我告诉你吗？我认为这个结构可以帮助我生成像[city [v]] [zipcode [v]] [street [v]] [number [v]]这样的四分割依赖下拉菜单。

预先感谢您的时间和帮助。

编辑：

<div v-for="location in test"> 
    <div v-for="(address,city) in location"> 
     <div v-for="(nextplz,plzLabel) in address"> 
      <div v-for="(nextstreet,plz) in nextplz"> 
       <div v-for="(streetInfo,streetLabel) in nextstreet"> 
        <div v-for="(numbers,streetName) in streetInfo"> 
         {{location['.key']}} : {{city}}<br/> 
         {{plzLabel}} : {{plz}}<br/> 
         {{streetLabel}} : {{streetName}}<br/> 
         {{numbers}}<hr/> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

编辑-2：固定的凹痕和错别字JSON

Answer 1

我假设test是位置阵列和位置对象看起来你张贴的JSON。通常你使用v-for迭代数组而不是对象（尽管你可以），以访问使用'。'的对象属性。符号，所以你可以试试这个：

<div v-for="location in test"> 
    {{location.address.nextplz.nextstreet.streetInfo}} 
    {{location.address.plzLabel}} 
</div> 

如果你想去在所有城市中，你会做这样的事情：

<div v-for="location in test"> 
    <div v-for="(key,val) in location.city"> 
    <!-- display the zipcode object for each city --> 
    <pre>{{city[key].zipcode}}</pre> 
    </div> 
</div>