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