with directive #5269
Description
What problem does this feature solve?
This would provide something akin to a with block. It would be useful to me especially in cases like the one shown here. During iterations where your context is essentially a superset of the current component's, you can't have a computed property that defines person since it would be different for every meeting.
There are, of course, ways around this. The most straightforward would be to set person on the meeting object during creation. The issue is that creating the object might be done in different ways (locally, initial data load, server broadcast, etc) and you would need to handle all those cases, preferably in a DRY manner.
It could be made to only work with v-for to avoid this.
What does the proposed API look like?
<template>
<table>
<tbody>
<tr
v-for="meeting in meetings"
with="{ person: people.find(person => person.id === meeting.personId) }"
>
<td>{{ meeting.date }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, firstName: 'Felix', lastName: 'Hudson' },
{ id: 2, firstName: 'Gaby', lastName: 'Rápalo' }
],
meeting: [
{ date: '2017-01-01', personId: 1 },
{ date: '2017-03-02', personId: 1 },
{ date: '2017-02-07', personId: 2 }
]
}
}
}
</script>