When you find yourself in a need of using an argument for a computed property, consider creating and moving the logic into a child component.
By doing this approach the components will provide the decoupling which makes it more structured, modular, and computed property caching.
By doing this approach the components will provide the decoupling which makes it more structured, modular, and computed property caching.
Before
<template>
<section class="posts">
<article v-for="post in posts">
<a :href="getUrl(post)">{{ getTitle(post) }}</a>
</article>
</section>
</template>
<script>
export default {
methods: {
getUrl (post) { ... },
getTitle (post) { ... }
}
}After
<!-- 1. PostList.vue -->
<template>
<section class="posts">
<PostItem v-for="post in posts" :post="post"/>
</section>
</template>
<!-- 2. PostItem.vue -->
<template>
<article v-for="post in posts">
<a :href="url">{{ title }}</a>
</article>
</template>
<script>
export default {
props: ['post'],
computed: {
url () { /* compute on this.post */ },
title () { /* compute on this.post */ }
}
}
</script>
Leave a reply