Javascript Vue.js 如何从 Json 属性获取键（左侧值）。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47155159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js how to get key (left side value) from Json property.
提问by Green_qaue
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": "[email protected]"
}
}
The value on the left side in parksand usersis not an index, but the actual idof the Park. How can I access this value in Javascript?
parks和左侧的值users不是索引，而是idPark的实际值。如何在 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, i.e the name "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? i.e if I have:
然而，这仅绑定右侧的park 值，即名称“park a”。我也需要能够访问左侧。如果在html中通过Vue无法实现，可以在脚本中完成吗？即如果我有：
"23": "park b"
"23": "park b"
How can I get 23?
我怎样才能得到23？
回答by Wing
Solution
解决方案
You can iterate through objects using the v-fordirective 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
进一步阅读
回答by Kresimir Pendic
you first get the keys with: Object.keysand 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": "[email protected]"
}
};
var keys = Object.keys( test.parks );
for (var i = 0; i < keys.length; i++){
console.log( test.parks[ keys[ i ] ] )
}回答by Niklesh Raut
There is no element as idin park, use indexlike this
没有像idin那样的元素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": "[email protected]"
}
}
},
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: keywill not work here v-bind:keyas keyis reserved
注意:key不会在这里工作，v-bind:key因为它key是保留的
