问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue.js 如何从 Json 属性中获取键（左侧值）。

社区维基
1
新手上路，请多包涵

我有一个看起来像的对象：

 {
  "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>

然而，这仅绑定右侧的公园值，即名称“park a”。我还需要能够访问左侧。如果不能通过 Vue 中的 html，可以在脚本中完成吗？即如果我有：

"23": "park b"

我怎样才能得到 23 ？

原文由 Green_qaue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptvue.js
阅读 558
2 个回答
得票最新
社区维基
1
✓ 已被采纳

解决方案

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

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

例子

 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>

进一步阅读

原文由 Wing 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

没有元素为 id 在 park ，使用 index 这样

<park-component v-for="(park,index) in customer.parks"
                        v-bind:prop="park"
                        v-bind:key="index">
</park-component>


 var parkComponent = Vue.extend({
    template: "<div>Key : {{park_key}}, Prop : {{prop}}</div>",
    props: ['prop','park_key']
});
var app = new Vue({
    el: "#vue-instance",
    data: {
      customer:{
        "id": 1,
        "name": "Customer",
        "parks": {
          "1": "Park a",
          "23": "Park b",
          "7": "Park c",
          "83": "Park d"
        },
        "users": {
          "11": "user@customer.com"
        }
      }
    },
    mounted() {
    },
    components: {
        parkComponent,
    },
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
    <park-component v-for="(park,index) in customer.parks"
                            v-bind:prop="park"
                            v-bind:park_key="index">
</park-component>
</div>

注意： key 在这里 v-bind:key 因为 key 被保留

原文由 Niklesh Raut 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题