Conditionals and Computed Props

Quick Morning Demo: Adding Tailwind to Vue

• Instructions

Code Spike Session

A code spike is a focused intensive learn about a particular topic. Today we’ll be focused on pre-setting filtered values to improve app performance

• Code this in a vue file in codepen

• In your groups, Practice working with filter and reduce

• discuss briefly use cases for these two methods. search google and prompt ai for ideas if needed

• Everyone should pick 1 application of 1 of these methods (try to have 2 and 2)

• Work off of the following gists for some more ideas on how to use it

Instructions and Tips

• Reduce Method

• filter method

Debrief

• Discuss and demonstrate your filters and reductions to one another.
• share code and/or experiment with each other’s implementations

Computed Properties

• Computed docs
• Use computed properties in your script tag to avoid adding logic to your template
• computed properties are less reactive and resource hungry than methods
• Use them for things like:
  • organizing a list by A-Z or Z-A
  • making calculations
  • modifying template content
• To use a computed property, simply add it’s name to the {{ }} where you would put a normal variable’s name
• Try it out in the vue playground link on this page

Activity: Set up computed props

• Use the filters and reductions from our first activity
• as these are often used for calculations that don’t change, create a list of content (users, characters, products…) (have 3-10 elements)
• set up a filtered and/or a sorted versions of the data in the script tags
  • ie:

  const characters = [{...}, {...}]
  const goodCharacters = // filtered version of characters
  const badCharacters = // filtered version of characters
  const sortedByAgeCharacters = // use sort

• however do this using vue’s computed syntax so that the functions do not need to run on the users system

Conditional Rendering

Vue has a few ways for you to render content under different contitions

• The primary one is v-if/v-else which removes and adds element from and to the DOM
• another approach is v-show which is like setting something to hidden. This is less costly and better for toggles (things that are switched back and forth between)
• you can put a v-if directly on template tags, giving you the ability to have completely different layouts given specific conditions
• You will want to deal with most of the logic for conditional logic in the script tags, these directives are for the last step of the conditional lifecycle

Activity: Conditional Rendering in Components

• Make a component that renders different content based on prop values
  • ie: if name === 'Shaggy' render a picture of a scooby snack, else render the mystery machine
  • you could also use numerical values arguably easier to start
  • remember the {:else} clause
• Render styles differently based a prop boolean:
  • ie: a feature card might be different from an info card in few enough ways to use the same component but with conditional rendering
    • suggestion: set the InfoCard to be a default in the {:else} and have the Feature card include a button and more visual prominance or something
    • for the prop, you can do this with a boolean prop