Exercise: Vue Part II

For the first part of this lesson we will be working with data encased in an array of objects and, once again, that data is all about café drinks.

Load all the data

Create a new html doc. Add the Vue JS CDN link between your <head></head> tags.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  1. Create a div in your html with the id of ‘drink’ .
  2. Download your data and unzip it. A file named drinkorder.js should appear. Drag drinkorder.js into the same folder as your new html file and connect it to your html file under your Vue link. Add the word “defer” (shown here) to load the scripts sequentially. 
     <script src="drinkorder.js" defer></script>
  3. Open drinkorder.js and look inside. At this point all that is in there is one big object with data about, well, drinks.
  4. Create a new Vue object in drinkorder.js. Set el  to ‘#drink’ . Add data to your vue, create a variable of data named drink, and set its value to the big data object with all of your info. 
    const drinkdata = {
        data() {
        return {
            drink: 
        [{
  5. Add the following line to the end of the data set: 
    Vue.createApp(drinkdata).mount("#drink");
  6. For our first performance, we will use v-for to output each drink’s name. Put this inside your #drink div. 
    <div v-for="eachDrink in drink">
                <h2> {{eachDrink.drink_name}} </h2>
    </div>
  7. At this point you should see names and descriptions for each drink.

Use a Vue method to load data sequentially

Bringing all of that data into webpage at once was kind of fun, and potentially useful. In this exercise, we are going to use a method (AKA function) to bring in just one student’s information at a time when a button is clicked.

  1. Remove or comment out everything inside of the #drink div.
  2. Add two new variables to the Vue’s data: drinkname and counter, as shown below. They will go at the end of the drink object. We will use each of those variables in the method that we are about to construct.
    {
        "drink_name": "Mocha Latte",
        "fact": " Espresso and steamed milk with a rich chocolate flavor — a cozy favorite.",
        "section": "115",
        "counter": "229"
    }], 

            drinkname: "",
            counter: 0

        };
    }

    };

    Vue.createApp(drinkdata).mount("#drink");
  3. Add placeholders to the #drink div tag. Create a button to connect a “showDrink” method that we are about to build.
    <div id="drink">
        <h2>{{ drinkname }}</h2>
        <p>{{ fact }}</p>
        <button @click="showDrink">Show Next Drink</button>
      </div>
    4. 




  4. It’s time to build out the method in the space shown below: 
     }
          ],
          // variables to hold what’s displayed
          drinkname: "",
          fact: "",
          counter: 0
        };
      },
      methods: {
        
    //build method here


          }
        }
      }
    };

    Vue.createApp(drinkdata).mount("#drink");
    5. 




  5. First, fetch the current drink using the counter. 
    showDrink() {
      const current = this.drink[this.counter];
      // guard in case array is empty
      if (!current) return;
    }
    6. 




  6. Update variables: 
    showDrink() {
      const current = this.drink[this.counter];
      if (!current) return;

      this.drinkname = current.drink_name;
      this.fact = current.fact;
    }
    7. 




  7. Advance the loop: 
    this.counter++;
    if (this.counter >= this.drink.length) {
      this.counter = 0;
    }
    8. 




  8. Finally, finish it off with a mounted method. At this point, you should see a different drink name and description each time you click the button. 
    }], 

            drinkname: "",
            fact: "",
            counter: 0

        };
    },
    methods: {
        showDrink() {
          const current = this.drink[this.counter];
          this.drinkname = current.drink_name;
          this.fact = current.fact;
         this.counter++;
    if (this.counter >= this.drink.length) {
      this.counter = 0;
    }}},mounted() {
        this.showDrink();
      }
    };

    Vue.createApp(drinkdata).mount("#drink");
        
    9. 






While we’re at it: How about a dropdown list?





We worked a bit with dropdown lists in a previous lesson or two where we used  plain, unadorned javascript to populate the <select> and <option> tags with data from Javascript objects. This time we are going to build, and access values from a dropdown list with Vue data, methods and syntax. Will it be any easier? You can be the judge.





    

  1. First, add a new method to the methods section. This one is ready to copy paste before the showDrink() method. Methods can exist in the same spot as long as they are separated by a comma. 
        displayDrink() {
      const chosen = this.drink.find(d => d.drink_name === this.selectedDrink);
      if (chosen) {
        this.drinkname = chosen.drink_name;
        this.fact = chosen.fact;}},
    2. 




  2. Next, use v-model and v-on:change to dynamically load the drink based on your selection.
      <select v-model="selectedDrink" v-on:change="displayDrink">
      <option disabled value="">-- Choose a Drink --</option>
      <option v-for="eachDrink in drink" :value="eachDrink.drink_name">
        {{ eachDrink.drink_name }}
      </option>
    </select>
     
    3. 




  3. You should now have a button that allows you to cycle through all of the drink options and a dropdown menu that allows you to select a specific drink. 
    4.