Tengo una plantilla vuejs y muestra valores de una matriz anidada. matriz de ejemplo es:
myArray : [ { name: "abc", }, { name123: "bcf" }, { name12456: "fdf" } ] <template> <div> {{ node.name }} </div> </template>Cuando llamo a los objetos de esta matriz, puedo mostrar el valor "abc" con {{ node.name }} pero quiero mostrar que las claves comienzan con la cadena "name". Entonces, de esta manera puedo enumerar todos los valores.
Nota: solo quiero mostrar las teclas que comienzan con "nombre". Puede haber diferentes claves en diferentes arreglos.
Puedes probar con la propiedad computed y 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>