Vue.js 2 Design Patterns and Best Practices

Template expressions

Often times, when we're displaying items on the screen, we may have to compute values and call functions to change the way our data looks. Instead of doing this work inside the template, it's advised to move this out into a computed property, as this is much easier to maintain:

// Bad <nuxt-link :to="`/categories/${this.category.id}`" class="card-footer-item">View</nuxt-link>// Good<nuxt-link :to="categoryLink" class="card-footer-item">View</nuxt-link>export default {  props: ['category'],  computed: {    categoryLink () {      return `/categories/${this.category.id}`    }  }}

This means any changes in our template are much easier to handle because the output is mapped to a computed property.