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>

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

1 个答案: