-
Run
yarn && yarn serve
inside this folder. Open the started website and see that it is displaying a welcome message. -
In your IDE, open
src/App.vue
file. Notice that there is some data in the application, but the template only displays a static message. -
Loop through the
cocktails
data property and for each cocktail display a title.Hint
<template> <div id='app'> <div v-for="cocktail in cocktails"> <h3> {{cocktail.title}} </h3> </div> </div> </template>
-
Display a preparation method for each cocktail. Note that method fields contain some HTML.
Hint
<template> <div id='app'> <div v-for="cocktail in cocktails"> <h3> {{cocktail.title}} </h3> <div v-html="cocktail.method"></div> </div> </div> </template>
-
Display an image for each cocktail. Limit the width of the image to 200px.
Hint
<template> <div id='app'> <div v-for="cocktail in cocktails"> <h3> {{cocktail.title}} </h3> <div><img :src="cocktail.imageUrl" width="200"></div> <div v-html="cocktail.method"></div> </div> </div> </template>
-
For each cocktail display the list of ingredients and their required quantities.
Hint
<template> <div id='app'> <div v-for="cocktail in cocktails"> <h3> {{cocktail.title}} </h3> <div><img :src="cocktail.imageUrl" width="200"></div> <ul> <li v-for="ingredient in cocktail.ingredients"> {{ingredient.quantity}} {{ingredient.title}} </li> </ul> <div v-html="cocktail.method"></div> </div> </div> </template>
-
For each ingredient, that has a price, display price.
Hint
<template> <div id='app'> <div v-for="cocktail in cocktails"> <h3> {{cocktail.title}} </h3> <div><img :src="cocktail.imageUrl" width="200"></div> <ul> <li v-for="ingredient in cocktail.ingredients"> {{ingredient.quantity}} {{ingredient.title}} <strong v-if="ingredient.price">CHF {{ingredient.price}}</strong> </li> </ul> <div v-html="cocktail.method"></div> </div> </div> </template>
-
Now let's try out some more conditional rendering and create a button that toggles the display of all prices:
- Prices should be initially hidden.
- When the prices are hidden, button text is "Show prices".
- When the prices are displayed, button text should change to "Hide prices".
As we know, there are a few directives, that could help us display things conditionally. Choose the one you like.
Hint
Here's a version with v-if:
<template> <div id='app'> <button v-on:click="displayPrices = !displayPrices" v-text="displayPrices ? 'Hide prices' : 'Show prices'"></button> <div v-for="cocktail in cocktails"> <h3> {{cocktail.title}} </h3> <div><img :src="cocktail.imageUrl" width="200"></div> <ul> <li v-for="ingredient in cocktail.ingredients"> {{ingredient.quantity}} {{ingredient.title}} <strong v-if="displayPrices && ingredient.price">CHF {{ingredient.price}}</strong> </li> </ul> <div v-html="cocktail.method"></div> </div> </div> </template> <script> export default { data() { return { displayPrices: true, .... } } } </script>
-
Try accomplishing the previous task with a different directive. Do you notice the difference when you inspect the DOM in a browser?
Hint
Here's a version with v-show:
<template> <div id='app'> <button v-on:click="displayPrices = !displayPrices" v-text="displayPrices ? 'Hide prices' : 'Show prices'"></button> <div v-for="cocktail in cocktails"> <h3> {{cocktail.title}} </h3> <div><img :src="cocktail.imageUrl" width="200"></div> <ul> <li v-for="ingredient in cocktail.ingredients"> {{ingredient.quantity}} {{ingredient.title}} <strong v-if="ingredient.price" v-show="displayPrices">CHF {{ingredient.price}}</strong> </li> </ul> <div v-html="cocktail.method"></div> </div> </div> </template>
lab02
Folders and files
Name | Name | Last commit date | ||
---|---|---|---|---|
parent directory.. | ||||