Vue.js 如何从 Json 属性中获取键（左侧值）。
[英]Vue.js how to get key (left side value) from Json property.
问题描述
I have an object that looks like:
我有一个看起来像的对象：
{
"id": 1,
"name": "Customer",
"parks": {
"1": "Park a",
"23": "Park b",
"7": "Park c",
"83": "Park d"
},
"users": {
"11": "user@customer.com"
}
}
The value on the left side in parks and users is not an index, but the actual id of the Park. parks和users中左边的值不是索引，而是Park的实际id 。 How can I access this value in Javascript?如何在 Javascript 中访问此值？
Currently I use Vue.Js, so I'm binding the value like this to a component:目前我使用 Vue.Js，所以我将这样的值绑定到一个组件：
<park-component v-for="park in customer.parks"
v-bind:prop="park"
v-bind:key="park.id">
</park-component>
This however, only binds the park value on the right side, ie the name "park a".然而，这仅绑定右侧的公园值，即名称“park a”。 I need to be able to access the left side as well.我还需要能够访问左侧。 If not possible through Vue in the html, can it be done in the script?如果不能通过 Vue 中的 html，可以在脚本中完成吗？ ie if I have:即如果我有：
"23": "park b"
How can I get 23 ?我怎样才能得到23 ？
3 个解决方案
解决方案1
38 已采纳 2017-11-07 10:13:14
Solution解决方案
You can iterate through objects using the v-for directive and get the key.您可以使用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进一步阅读
解决方案2
2 2017-11-07 10:14:23
you first get the keys with: Object.keys and then loop it :)你首先得到键： Object.keys然后循环它:)
I've included example how to access the values!我已经包含了如何访问值的示例！
var test = { "id": 1, "name": "Customer", "parks": { "1": "Park a", "23": "Park b", "7": "Park c", "83": "Park d" }, "users": { "11": "user@customer.com" } }; var keys = Object.keys( test.parks ); for (var i = 0; i < keys.length; i++){ console.log( test.parks[ keys[ i ] ] ) }
解决方案3
2 2017-11-07 10:55:00
There is no element as id in park , use index like this park中没有元素作为id ，使用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>
Note : key will not work here v-bind:key as key is reserved注意： key在这里不起作用v-bind:key因为key是保留的
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.