DEV Community

Discussion on: (An Approach to) Vue.js Template Variables

View post
Collapse
 
bponomarenko profile image
Borys Ponomarenko • • Edited

My way would be to create computed property with stored results of getUserData function execution:

computed: {
    usersWithData() {
        return this.users.map(id => ({ id, ...this.getUserData(id) }));
    }
}
Enter fullscreen mode Exit fullscreen mode

After that is can simply be used like:

<li v-for="user in usersWithData" :key="user.id">
    <img :src="user.avatar" /><br />
    🏷️ {{ user.name }}<br />
    🔗 {{ user.homepage }}
</li>
Enter fullscreen mode Exit fullscreen mode

More Vue-ish as for me.

Collapse
 
loilo profile image
Florian Reuschel • • Edited

Yes, this is the obvious one and should always be preferred where applicable.
Template variables are a better (as in "more ergonomical") fit when you don't need to process all the array items and don't want to duplicate logic.