Sometimes, we want to use computed property with v-for in Vue.js.
In this article, we’ll look at how to use computed property with v-for in Vue.js.
How to use computed property with v-for in Vue.js?
To use computed property with v-for in Vue.js, we can use computed properties like any other reactive properties.
For instance, we write
<template>
<div>
<p v-for="name in fullNames" :key="name">
<span>{{ name }}</span>
</p>
</div>
</template>
<script>
//...
export default {
//...
computed: {
fullNames() {
return this.items.map((item) => {
return `${item.firstName} ${item.lastName}`;
});
},
},
//...
};
</script>
to create the fullNames computed property that returns an array.
Then in the template, we render the items in fullNames with v-for.
We set the key prop to a unique value in fullNames.
Conclusion
To use computed property with v-for in Vue.js, we can use computed properties like any other reactive properties.
