Part 8: Fix bugs with number-to-string coercion [Beginner Tutorial: Learn Vue, CSS Grid and Flexbox]

Before you continue, make sure you see this in Codepen

HTML you should see after completing Part 7
JS you should see before proceeding with this tutorial

What we will accomplish

The problem I’ve been avoiding until now

Let’s start by updating a Vue directive in our template

Step 1: Use a ternary operator to conditionally set a value in our data model

condition ? true : false
1 + 1 == 2 ? 'Yes' : 'No'

The answer is a bit difficult to describe in words, so here it is:

current === 0 ? current = String(digit) : current += digit

What is this doing?

For example:

New problem

Step 2: Coerce a value from string to number before operating on it

Your code should now look like this

answer: function() {  return eval(this.total + this.selected + Number(this.current));}

Step 3: Update the ‘%’ button’s Vue directive to correctly operate on a value of type number

current = Number(current) * 0.01

Step 4: Use another ternary operator to correctly identify when to apply a decimal point

The problem

current.toString().indexOf('.') == -1 ? current += '.' : null

To explain

current.toString().indexOf('.') == -1 ? current += '.' : null

Try it out…it all works!

This marks the end of Part 8

Continue to Part 9: Clean-up HTML and improve UX

Designer, Developer, DataViz, Dad • rmion.com