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 you should see having completed Part 1

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 the data object. The key is operators. The value is an array containing four values of type string: +, -, *, / (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 new key: value pair. Its key is selected 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 the array 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 type string. So enclose this.first + this.second in a set of parentheses ().
• These parentheses aren’t just decoration. They are in fact the invocation of eval. So, write eval before the opening parenthesis eval(...).
• Now your function should return the result of calling eval with a single string argument.
• Lastly, we must account for the current value stored in selected. We won’t always be adding this.first and this.second. Luckily, it’s as easy as concatenating all three values together. So you’ll add this.selected and another + between the existing + and this.second, resulting in three this. 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 inputs is a + sign. Replace it with a new select element.
• Add a single option element as a child of the new select 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 the v- prefix.
• Add Vue’s for directive to the option element. Remember to prefix it with v- 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, replacing items with operators and item with operator.

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’s model directive. Remember to prefix it with v-. Assign to this model (via the = sign, enclosed in double quotes " ) the value selected.

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.

Continue to Part 3: Refactor select menu to buttons