Part 2: Choose from multiple operators [Beginner Tutorial: Learn Vue, CSS Grid and Flexbox]
Before you continue, make sure you see this in Codepen
What we will accomplish
By the end of Part 2, we should be able to select from a dropdown menu the options: addition, subtraction, multiplication and division…and immediately see the newly computed answer
Step 1: Add an array of operators to our model
- In the JS pane, add a new
key: value
pair to thedata
object. Thekey
isoperators
. Thevalue
is anarray
containing four values of typestring
: +, -, *, / (that’s the plus sign, minus sign, asterisk, and forward slash). Remember to enclose each character in either single'
or double"
quotes.
Step 2: Set an initial state to be selected
- Right after your new
operators
array, add a newkey: value
pair. Itskey
isselected
and its value can be any of the four operators from above. In my case, I chose the+
operator. Remember to enclose it in the same quotes you used in thearray
above.
Step 3: Update the ‘answer’ computed property to account for different operators
The way we left it, our answer
function looks like this:
answer: function() { return this.first + this.second;}
This works fine when the operator will always be +
. But now, we want to dynamically change the operator, and ultimately return the evaluation of two operands based upon one of four operators.
To do this, I chose to use a rather taboo method in JavaScript, eval()
. For our purposes, it does exactly what we need with minimal code, which is: accept a string that combines two numbers and a symbol, and evaluate it as if I had entered it as an expression into the JavaScript console. So…take '4 / 2'
and run at as > 4 / 2
returning 2
instead of 4 / 2
or worse, NaN
.
- What this function returns will be the result of calling
eval
with a single argument of typestring
. So enclosethis.first + this.second
in a set of parentheses()
. - These parentheses aren’t just decoration. They are in fact the invocation of
eval
. So, writeeval
before the opening parenthesiseval(...)
. - Now your function should
return
the result of callingeval
with a singlestring
argument. - Lastly, we must account for the current value stored in
selected
. We won’t always be addingthis.first
andthis.second
. Luckily, it’s as easy as concatenating all three values together. So you’ll addthis.selected
and another+
between the existing+
andthis.second
, resulting in threethis.
and two+
signs, one after the other.
That is all we have to do with the model, a.k.a. the code in the JS pane. Now let’s update the template in the view, a.k.a. the code in the HTML pane. Hint: I’m hoping to help you become more familiar with single-page-application terms like MVC (or model-view-controller).
In the next few steps, we will gradually build up a select
group (often referred to as a dropdown list) that contains all four values from the operators
array and correctly computes an answer based on the currently selected option’s symbol.
Step 4: Add a select group and single option to the page
- In the HTML pane, between your two
input
s is a+
sign. Replace it with a newselect
element. - Add a single
option
element as a child of the newselect
element. - Between the
option
element’s opening and closing tags, use the proper syntax for text interpolation in Vue to output a currently non-existent value,operator
. If you don’t remember, Vue’s text interpolation syntax is this:{{ }}
with an expression (which could just be a value) inside.
I won’t always include code that can be copy-pasted, but given this integral and early step, it’s important to ensure you follow along:
<select> <option>{{ operator }}</option></select>
Until now, anytime I instructed you to add something in the HTML pane, you could reference that same value somewhere in the JS pane. But here, there is nothing in the JS pane — a.k.a. our model — labeled operator
. There is, however, an array
stored in the value operators
. That should be a clue!
Step 5: Use a new Vue directive to loop over an array and output something for each item in the array
- You’re going to add an attribute to the
option
element. This is not a native HTML attribute, though. This is another Vue directive, and thus requires thev-
prefix. - Add Vue’s
for
directive to theoption
element. Remember to prefix it withv-
and, though I haven’t told you the value, remember to put an=
sign between the directive name and the value, and enclose the value in double quotes"
.
Vue’s for
directive accepts a specific type of expression as its value, that often follows this pattern: v-for="item in items"
. This helps the author understand what’s happening: we will iterate (or loop) over a property in our model (in this case items
), and each time through the loop, we can reference the current value using the alias item
.
- Using the code above as your guide, complete the
for
directive by adding the proper value, replacingitems
withoperators
anditem
withoperator
.
Earlier you used text interpolation to display a value stored in — at the time — some unknown property operator
. Hopefully now you realize that we get that value from the v-for
directive’s operator
.
Step 6: Use Vue’s ‘model’ directive to connect the ‘select’ element with our corresponding model’s property
Earlier in Part 2, we added two properties to our model in the JS pane, operators
— an array of string
operators — and selected
which we initialized to the +
character. In the previous step we successfully connected operators
from the model to our template. In this step and the next, we will connect selected
from our model to our template.
- In the HTML pane, within the opening tag of the
select
element, add a new attribute: Vue’smodel
directive. Remember to prefix it withv-
. Assign to thismodel
(via the=
sign, enclosed in double quotes"
) the valueselected
.
With that change in place, both operators
and selected
from our model are connected to our template through the use of Vue directives and text interpolation.
Try it out
Enter different numbers into each input field and select different operators from the dropdown menu. Note how the number after the =
sign automatically updates to reflect the solution.
If you think your application is broken on account of things not working as described above, click through to Part 3 to see a screenshot of my Codepen up to this point.
This marks the end of Part 2
In Part 3, we will convert the select menu into a series of buttons and introduce an important new Vue directive, v-on
.