Vue js Array Keys Method: An Array Iterator object that contains an array’s keys is returned by the keys() method. The primary array is unmodified by the keys() method. ECMAScript 6 (ES6) introduces the function keys(). An Array Iterator object with an object’s keys is returned by the Object.keys() function.Here in this article, we will explain how to use the keys() function in Vue.js.You can use our online editor to check and modify the code.
How to make object called Array Iterator that holds keys array:
You can use the array.prototype.keys() javascript method in Vue.js tocreate an array iterator that holds the keys of an array, as given simply below:
Vue js Simple array keys method
<div id="app">
<button @click="myFunction">Get Array Index</button>
<p v-for="r in result">Index: {{r}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data()
{
return{
Array:['Australia','England','America','India','China','Russia'],
result : ''
}
},
methods:{
myFunction(){
this.result = this.Array.keys();
},
}
}).mount('#app')
</script>
The Output of above Example is given as below:
How to get Property names in Object array in Vue.js
The Vue.js Object.prototype.keys(‘obj’) Javascipt method returns an array of the names of each property that an object’s own iterator string-keyed identifies.
Vue js Array-like object
<div id="app">
<button @click="myFunction">Get Property Name</button>
<p v-for="r in result">{{r}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data()
{
return{
Edata:
{
Name:'Andrew',
Age:30,
Role:'Marketing',
Country:'London',
Email:'andrew@gmail.com',
},
result : ''
}
},
methods:{
myFunction(){
this.result = Object.keys(this.Edata);
},
}
}).mount('#app')
</script>
The Output of above Example is given as below:
Vue.js sort Array Object by Key
You can sort an array like an object by just using Object.prototype.keys("obj") vanilla Javascript method in Vue.js sort an array in Vue.js, as given simply below:
Vue js Array-like object with random key ordering
<div id="app">
<button @click="myFunction">Get Property Name</button>
<p v-for="r in result">{{r}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data()
{
return{
countries:
{
0:'England',
10:'India',
2:'Australia',
8:'London',
4:'Africa',
},
result : ''
}
},
methods:{
myFunction(){
this.result = Object.keys(this.countries);
},
}
}).mount('#app')
</script>
The Output of above example is given below:
