Perhaps consider incorporating another v-for loop that iterates through a list with only one item:
<div id="el">
<p v-for="item in items">
<template v-for="fullName in [item.firstName + ' ' + item.lastName]">
<span>{{fullName}}</span>
</template>
</p>
</div>
It may not be the most elegant solution, but it achieves your desired outcome: an object encapsulating that span with a fullName property containing the specified value.
This feature serves a purpose beyond aesthetics, as we might need to reference that value in multiple instances, for example:
<span v-if="...">I am {{fullName}}</span>
<span v-else-if="...">You are {{fullName}}</span>
<span v-else>Who is {{fullName}}?</span>
In my scenario, I was generating dates within v-for loops (yes, yet another calendar), like so:
<v-row v-for="r in 5">
<v-col v-for="c in 7">
<template v-for="day in [new Date(start.getTime() + 24*60*60*1000*((c-1) + 7*(r-1)))]">
<span>
Rendering of a day such as {{day.getYear()}} and
{{day.getMonth()}} etc.
</span>
</template>
</v-col>
</v-row>
(I omitted the :key="whatever" settings for brevity)
The ideal approach would be to create a separate component for this logic, but introducing a new component for every small task like this risks cluttering the namespace unnecessarily.
Perhaps a
v-let="day as new Date(...)"
directive could prove useful in such cases.