Today I Learned - Rocky Kev

TIL a clean way to add classes based on the page in Vue

POSTED ON:

TAGS: clean-code arrays vue

In Vue:

The Vue Version 

<!-- The long way -->
<vue-component :class="{
  'classOnlyOnThesePages' :
  $route.name === 'Home' || $route.name === 'Gallery' || $route.name === 'Profile'
}" />


<!-- The short way -->
<vue-component :class="{
  'classOnlyOnThesePages' :  ['Home', 'Gallery', 'Profile'].includes($route.name)
}" />

Pretty cool, huh? Super readable!

It pretty much is just this:

const addClassesToThisPage = ( ['Home', 'Gallery', 'Profile'].include($route.name))

Related TILs

Tagged: clean-code

TIL a clean way to add classes based on the page in Vue

If your pages exist in a array, use the includes() to check.

TIL match expression (like switch)

Use the match($var) method to filter the results to exactly what you want.

TIL Pure and Impure Functions

A important piece of Functional Programming is creating Pure Functions. NO SIDE EFFECTS