Vue Js Methods to computed properties

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

Created on Sep 11, 2021

•

192 views

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.

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>

Vue Js Snippets

new

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Patreon