I hava a vuejs template and it shows values of a nested array. example array is:
myArray : [
{
name: "abc",
},
{
name123: "bcf"
},
{
name12456: "fdf"
}
]
<template>
<div>
{{ node.name }}
</div>
</template>
When I call objects of this array I can show "abc" value with {{ node.name }} but I want to show the keys starts with "name" string. So, with this way I can list all values.
Note: I just want to show keys with starts "name". There may be different keys in different arrays.
You can try with computed property and Object.keys :
new Vue({
el: '#demo',
data() {
return {
myArray: [
{name: "abc"},
{nn00: 'rrr'},
{name123: "bcf", ar: [{name9: 'nested1'}]},
{name12456: "fdf"},
{no78: "eee", ar: [{name8: 'nested2'}]}],
res: []
}
},
methods: {
getValues(arr) {
arr.forEach(a => {
let val = Object.keys(a).filter(k => {
if (typeof a[k] === 'object') this.getValues(a[k])
return k.startsWith('name')
})
this.res.push(a[val])
})
}
},
mounted() {
this.getValues(this.myArray)
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="(node, i) in res" :key="i">
{{ node }}
</div>
</div>