Exercise: Vue Part V

Computed properties are yet another important tool that a budding Vue developer such as yourself should know how to use. They work a bit like functions in that you can combine variables and perform mathematical functions, but you don’t have to call them. Instead, you simply enter the name of a given computed property into your html with double brackets.

We will start with a really simple example. We are going to create a menu for your new café. Create a new html and js document. Link them together. Add the CDN <script src=””></script> link to Vue.
Create a div with an id of #drinks in your html doc. Within that div add and <h2></h2> element that says “Welcome To:” and an <h1></h1> element that looks like this:
```
 <h1>{{ cafeName }}</h1>
```

In your JS doc, add in this template for the data and computed function:

const drinkData = new Vue({
  el: "#drinks",
  data: {
    
  },
  computed: {
    
  }
});

In the data section, declare two parts of the name of your cafe (that you will combine with the computed functionality).
```
data: {
    firstName: "Cafe",
    lastName: "De Claire"
  },
```

Finally, let’s compute! We declare the full <h1> {{ cafeName }} </h1> here.

computed: {
    cafeName() {
      return this.firstName + " " + this.lastName;
    }
  }

The top of your webpage should display the name of your café!

Let’s move on to a slightly more complex demonstration of computed properties.

Download THIS zip file, unzip it and move it into your work folder.
Take a look at Vue5_start.html. You will notice that inside of the #drink div is another div named #container. Look at the CSS and you will see that #container has a width of 400px and floats left. Some other styling is ready to roll as well.
First create an unordered list inside the #container. Inside the <ul>, add one list item that uses Vue’s v-for directive to repeat for every drink in your menu array:
```
<ul>
  <li v-for="eachDrink in menu">
    {{ eachDrink.drink_name }}
  </li>
</ul>
```
Our goal is to hover over each drink in the list and display its corresponding description. To achieve this goal, we need to establish where each drink is in the array (its index) and we need to initiate a hover function (called @mouseover).
```
<li v-for="(eachDrink, index) in menu" @mouseover="showDescription(index)">
  {{ eachDrink.drink_name }}
</li>
```

Next, add a description div within the #drink div (but not inside the #container). We will connect this to a function soon.

<div id="description-display">
  <h3>{{ currentDrink.drink_name }}</h3>
  <p><strong>Description:</strong> {{ currentDrink.fact }}</p>
</div>

In Vue5_start.js, add a computed section that returns the drink at counter.
Put this right after data: { … }, (remember the comma after data).
```
computed: {
  currentDrink() {
    return this.menu[this.counter];
  }
},
```
Add a method to update counter when a list item is hovered.
Put this after computed: { … }, (again, add the comma).
```
methods: {
  showDescription(index) {
    this.counter = index;
  }
}
```
Open and test! Hover over each drink item. The name and description should appear to the right.