首页 / 技术问答 / Vue.js问答列表 / 问答详情

Vue.js 如何从 Json 属性中获取键.

我有一个物体看起来像: 

{
  "id": 1,
  "name": "Customer",
  "parks": {
    "1": "Park a",
    "23": "Park b",
    "7": "Park c",
    "83": "Park d"
  },
  "users": {
    "11": "user@customer.com"
  }
}

parks和users中左侧的值不是索引，而是公园的实际id.如何在Javascript中访问该值？

目前我使用Vue.Js，所以我将这样的值绑定到一个组件:

<park-component v-for="park in customer.parks"
                            v-bind:prop="park"
                            v-bind:key="park.id">
</park-component>

然而，这仅约束右侧的公园值，即名称"公园a".我还需要能够进入左边.如果无法通过html中的Vue实现，可以在脚本中实现吗？i、 e如果我有:

"23": "park b"

我怎么能拿到23？

推荐答案

Solution

可以使用v-for指令遍历对象并获取密钥.

<ul>
  <li v-for="(value, key) in object">{{ key }}: {{ value }} </li>
</ul>

Example

new Vue({
  template: `
    <ul>
      <li v-for="(value, key) in object">{{ key }}: {{ value }} </li>
    </ul>
  `,
  
  data: () => {
    return {
      object: {
        key1: 'value1',
        key2: 'value2',
        key3: 'value3',
      },
    };
  },
}).$mount('#root');
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>

Further reading

Vue.js相关问答推荐

Vue composition api： 访问