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

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