digamos que tengo una lista de objetos recuperados de la base de datos y los estoy iterando a través del bucle foreach en el bloque de secuencias de comandos
export default { props: { guests: { type: Object, default: null, }, ... }, computed: { myGuests() { this.guests.forEach(guest => { // the if guest.age > than 18 condition should be here const myGuests = JSON.parse(JSON.stringify(guest)); // body of my method }); return ...; }, },Quiero ponerle una condición, de modo que si la edad es mayor de 18, los almaceno en otro objeto, luego, cuando llamo al método desde el bloque de plantilla, la directiva v-for debe pasar por esos elementos (es decir, invitados cuya edad es mayor que 18 (en lugar de pasar por todos los invitados con sus diferentes edades))
v-for="(guest, g) in myGuests" //call for the new created object whose age property is > 18 :key="g" ...Puede usar el filtro en la propiedad calculada:
Vue.component('Child', { template: ` <div> <div v-for="(guest, g) in myGuests" :key="g"> {{ guest.name }} - {{ guest.age }} </div> </div> `, props: { guests: { type: Array, default: null, }, }, computed: { myGuests() { return this.guests.filter(g => g.age > 18) } } }) new Vue({ el: '#demo', data() { return { guests: [{'name': 'aa', 'age': 15}, {'name': 'bb', 'age': 21}, {'name': 'cc', 'age': 18}, {'name': 'dd', 'age': 19}, {'name': 'ee', 'age': 20}, {'name': 'ff', 'age': 24}] } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <child :guests="guests"> </child> </div>