Posts Learn Components Snippets Categories Tags About
/

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

12 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>

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for Vue Js Methods to computed properties

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More