- \n
- Create a div in your html with the id of ‘drink’ .<\/li>\n\n\n\n
- Download your data<\/a> 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><\/code><\/pre><\/li>\n\n\n\n- Open drinkorder.js and look inside. At this point all that is in there is one big object with data about, well, drinks.<\/li>\n\n\n\n
- 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:
[{<\/code><\/pre><\/li>\n\n\n\n- Add the following line to the end of the data set:
Vue.createApp(drinkdata).mount(\"#drink\");<\/code><\/pre><\/li>\n\n\n\n- 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><\/pre><\/li>\n\n\n\n- At this point you should see names for each drink. Try adding the description!<\/li>\n<\/ol>\n\n\n\n
Use a Vue method to load data sequentially<\/h3>\n\n\n\n
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 drink’s description at a time when a button is clicked.<\/p>\n\n\n\n
- \n
- Remove or comment out everything inside of the #drink div.<\/li>\n\n\n\n
- 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 \u2014 a cozy favorite.\",
\"section\": \"115\",
\"counter\": \"229\"
}],
drinkname: \"\",
counter: 0<\/strong>
};
}
};
Vue.createApp(drinkdata).mount(\"#drink\");<\/code><\/pre><\/li>\n\n\n\n- Add placeholders<\/strong> 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><\/code><\/pre><\/pre><\/li>\n\n\n\n
- It’s time to build out the method in the space shown below:
![\"\"](\"https:\/\/apweb.quest\/wp-content\/uploads\/2019\/03\/img_5c9e5cd9bf905.png\")
}
],
\/\/ variables to hold what\u2019s displayed
drinkname: \"\",
fact: \"\",
counter: 0
};
},
methods: {
\/\/build method here
}<\/strong>
}
}
};
Vue.createApp(drinkdata).mount(\"#drink\");<\/code><\/pre><\/li>\n\n\n\n- First, fetch the current drink using the counter.
showDrink() {
const current = this.drink[this.counter];
\/\/ guard in case array is empty
if (!current) return;
}<\/code><\/pre><\/li>\n\n\n\n- Update variables:
![\"\"](\"https:\/\/apweb.quest\/wp-content\/uploads\/2019\/03\/img_5c9e620682308.png\")
showDrink() {
const current = this.drink[this.counter];
if (!current) return;
this.drinkname = current.drink_name;
this.fact = current.fact;
}<\/code><\/pre><\/li>\n\n\n\n- Advance the loop:
this.counter++;
if (this.counter >= this.drink.length) {
this.counter = 0;
}<\/code><\/pre>![\"\"](\"https:\/\/apweb.quest\/wp-content\/uploads\/2019\/10\/img_5db79a149e248.png\")
<\/li>\n\n\n\n- 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\");
<\/code><\/pre><\/li>\n<\/ol>\n\n\n\nWhile we’re at it: How about a dropdown list?<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
- \n
- 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() {\n const chosen = this.drink.find(d => d.drink_name === this.selectedDrink);\n if (chosen) {\n this.drinkname = chosen.drink_name;\n this.fact = chosen.fact;}},<\/code><\/pre><\/li>\n\n\n\n- 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\">\n <option disabled value=\"\">-- Choose a Drink --<\/option>\n <option v-for=\"eachDrink in drink\" :value=\"eachDrink.drink_name\">\n {{ eachDrink.drink_name }}\n <\/option>\n <\/select><\/code><\/pre> <\/li>\n\n\n\n- 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. <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
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\u00e9 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> Use a Vue method to … Continue reading Exercise: Vue Part II<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3698,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3800","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3800"}],"version-history":[{"count":46,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3800\/revisions"}],"predecessor-version":[{"id":4838,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3800\/revisions\/4838"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3698"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Next, use v-model and v-on:change to dynamically load the drink based on your selection.
- Add placeholders<\/strong> to the #drink div tag. Create a button to connect a “showDrink” method that we are about to build.