In-template computed property declaration in VueJS

Jeffrey Biles — Fri, 07 Feb 2020 13:20:39 +0000

Computed Properties are one of the best features of VueJS.

However, they don't work in all situations.

For example, let's say that you're looping over an array in a template and need to calculate something based on the index.

<span v-for="(item, index) in new Array(5)" :key="index">
  <slot :isFilled="index + 1 <= rating">
    <font-awesome-icon icon="star" v-if="index + 1 <= rating" />
    <font-awesome-icon :icon="['far', 'star']" v-else />
  </slot>
</span>

This example is from a rating-display component which I was using in my recent course on Component Slots. It takes in a rating prop, then displays either a set of stars (default) or whatever icons you choose to put into the slot.

The issue here is that index + 1 <= rating is repeated, and in the second usage with the v-if, the intent of the line is not clear.

However, we can't use a traditional computed property, because we're relying on index for the calculation.

And using a method, while it successfully solves the intent issue, is still pretty messy.

<span v-for="(item, index) in new Array(5)" :key="index">
  <slot :isFilled="isFilled(rating, index)">
    <font-awesome-icon icon="star" v-if="isFilled(rating, index)" />
    <font-awesome-icon :icon="['far', 'star']" v-else />
  </slot>
</span>

Wouldn't it be cool if, instead, you could just assign stuff to a property mid-template?

<!-- not actual code -->
<span v-for="(item, index) in new Array(5)" :key="index">
  let isFilled = index + 1 <= rating
  <slot :isFilled="isFilled">
    <font-awesome-icon icon="star" v-if="isFilled" />
    <font-awesome-icon :icon="['far', 'star']" v-else />
  </slot>
</span>

The answer is yes, that would be awesome.

Good news: we can do it.

Kind of.

<span v-for="(item, index) in new Array(5)" :key="index">
  <Let :val="index + 1 <= rating" v-slot="{val: isFilled}">
    <slot :isFilled="isFilled">
      <font-awesome-icon icon="star" v-if="isFilled" />
      <font-awesome-icon :icon="['far', 'star']" v-else />
    </slot>
  </Let>
</span>

So it's probably some crazy complex meta-programming magic, right?

See for yourself:

<template>
  <span>
    <slot :val="val" />
  </span>
</template>

<script>
  export default {
    //this can be anything, so it's a rare case where this style of prop declaration is preferred
    props: ['val'] 
  }
</script>

<style lang="scss" scoped>

</style>

That's the entire thing.

I even left the empty css block in there, so I could say I didn't cut a single line.

If you want to know more, check out my courses on Slots on VueScreencasts.com. The Let block was pulled from the first course, and I'll be adding a second course in the series -- with even more crazy uses of slots -- in a week.

--Jeffrey

DEV Community: Jeffrey Biles

In-template computed property declaration in VueJS