VueJS Tutorial – #6 Template Syntax

VueJS Tutorial – #6 Template Syntax

Before we start with another VueJS Tutorial, let me promote our VueJS Course with a Certificate right at the beginning. You’ll see more interactive and deeper Content about VueJS. At the end you’ll also receive a VueJS Certificate from German IT Academy. That’s it.

Problem / Task

While coding a solution for the following tasks, make sure to make use of every single v-directive at least once: v-text, v-html, v-once and v-model. Also, do not forget to use conditional and iterative v-directives, if needed.

  • Create a new Vue Component CustomizeDonut.vue
  • Use following JSON Sample data as ‘donuts‘ data property
  • In CustomizeDonut, create 4-step input process, in which a user has to perform one data-selection in each step. Use v-model as much as you can. The steps should have individual h1 titles and individual Button Values.
    • Select Donut by name (see Sample Data)
    • Select Batter Type
    • Select Topping Type
    • Last step: Show the summary and a dummy button “Order Donut”

Hint

Here is a sample Object of a Donut. Few things stand out: We have a type and a name. We have a list of “batters” and “topping”, which contain object with further details.

	{
		"id": "0001",
		"type": "donut",
		"name": "Cake",
		"ppu": 0.55,
		"batters":
			{
				"batter":
					[
						{ "id": "1001", "type": "Regular" },
						{ "id": "1002", "type": "Chocolate" },
						{ "id": "1003", "type": "Blueberry" },
						{ "id": "1004", "type": "Devil's Food" }
					]
			},
		"topping":
			[
				{ "id": "5001", "type": "None" },
				{ "id": "5002", "type": "Glazed" },
				{ "id": "5005", "type": "Sugar" },
				{ "id": "5007", "type": "Powdered Sugar" },
				{ "id": "5006", "type": "Chocolate with Sprinkles" },
				{ "id": "5003", "type": "Chocolate" },
				{ "id": "5004", "type": "Maple" }
			]
	}
  • To have a multi-step process, you have to track the status of the current process. You can do it with an object. Or simpler yet, a variable that will store the step number that the user is currently performing.

Solution

Here is the solution we came up with for this VueJS Tutorial. Please that is no definite solution, except that the v-directive are used correctly. We smashed the solution into one Vue Component, that way we make it simpler to understand by not having the code in 3-4 different files.

<template>
  <div id="CustomizeDonut">
    <h1 v-text="stepConfig[step].title"></h1>
      <div v-if="step == 1">
            <select v-model="userInput.donutId">
                <option v-for="donut in donuts" :value="donut.id" :key="donut.id" v-text="donut.name"/>
            </select>
      </div>
      <div v-else-if="step == 2">
            <select v-model="userInput.batterId">
                <option v-for="batter in batters" :value="batter.id" :key="batter.id" v-text="batter.type"/>
            </select>
      </div>
      <div v-else-if="step == 3">
            <select v-model="userInput.toppingId">
                <option v-for="topping in toppings" :value="topping.id" :key="topping.id" v-text="topping.type"/>
            </select>
      </div>
      <div v-else-if="step == 4">
            Donut Id: {{userInput.donutId}}<br>
            Batter Id: {{userInput.batterId}}<br>
            Topping Id: {{userInput.toppingId}}<br>
      </div>
      <button @click="stepConfig[step].nextStep" v-text="stepConfig[step].button"/>
  </div>
</template>

<script>
    export default {
        name: "CustomizeDonut",
        data() {
            return {
                donuts: [{
                        "id": "0001",
                        "type": "donut",
                        "name": "Cake",
                        "ppu": 0.55,
                        "batters": {
                            "batter": [{
                                    "id": "1001",
                                    "type": "Regular"
                                },
                                {
                                    "id": "1002",
                                    "type": "Chocolate"
                                },
                                {
                                    "id": "1003",
                                    "type": "Blueberry"
                                },
                                {
                                    "id": "1004",
                                    "type": "Devil's Food"
                                }
                            ]
                        },
                        "topping": [{
                                "id": "5001",
                                "type": "None"
                            },
                            {
                                "id": "5002",
                                "type": "Glazed"
                            },
                            {
                                "id": "5005",
                                "type": "Sugar"
                            },
                            {
                                "id": "5007",
                                "type": "Powdered Sugar"
                            },
                            {
                                "id": "5006",
                                "type": "Chocolate with Sprinkles"
                            },
                            {
                                "id": "5003",
                                "type": "Chocolate"
                            },
                            {
                                "id": "5004",
                                "type": "Maple"
                            }
                        ]
                    },
                    {
                        "id": "0002",
                        "type": "donut",
                        "name": "Raised",
                        "ppu": 0.55,
                        "batters": {
                            "batter": [{
                                "id": "1001",
                                "type": "Regular"
                            }]
                        },
                        "topping": [{
                                "id": "5001",
                                "type": "None"
                            },
                            {
                                "id": "5002",
                                "type": "Glazed"
                            },
                            {
                                "id": "5005",
                                "type": "Sugar"
                            },
                            {
                                "id": "5003",
                                "type": "Chocolate"
                            },
                            {
                                "id": "5004",
                                "type": "Maple"
                            }
                        ]
                    },
                    {
                        "id": "0003",
                        "type": "donut",
                        "name": "Old Fashioned",
                        "ppu": 0.55,
                        "batters": {
                            "batter": [{
                                    "id": "1001",
                                    "type": "Regular"
                                },
                                {
                                    "id": "1002",
                                    "type": "Chocolate"
                                }
                            ]
                        },
                        "topping": [{
                                "id": "5001",
                                "type": "None"
                            },
                            {
                                "id": "5002",
                                "type": "Glazed"
                            },
                            {
                                "id": "5003",
                                "type": "Chocolate"
                            },
                            {
                                "id": "5004",
                                "type": "Maple"
                            }
                        ]
                    }
                ],
                step: 1, // We start with step 1
                stepConfig: {
                    1: {
                        title: "Donut Type",
                        button: `Go to Step 2`,
                        nextStep: () => {this.step = 2;}
                    },
                    2: {
                        title: "Batter Type",
                        button: `Go to Step 3`,
                        nextStep: () => {this.step = 3;}
                    },
                    3: {
                        title: "Topping Type",
                        button: `Final Step`,
                        nextStep: () => {this.step = 4;}
                    },
                    4: {
                        title: "Your Donut",
                        button: `Send order and Start over`,
                        nextStep: () => {this.step = 1;}
                    },
                },
                userInput: {
                    donutId: 0,
                    batterId: 0,
                    toppingId: 0
                }
            }
        },
        computed: {
            batters: {
                get() {
                    const currentDonut = this.donuts.filter(item => item.id == this.userInput.donutId)
                    return currentDonut[0].batters.batter
                }
            },
            toppings: {
                get() {
                    const currentDonut = this.donuts.filter(item => item.id == this.userInput.donutId)
                    return currentDonut[0].topping
                }
            }
        }
    }
</script>

<style>
button, option, select {
    margin: 20px 20px 20px 20px;
    font-size: 30px;
    color: rgb(255, 255, 255);
    background: rgba(255, 106, 0, 0.972)
}
</style>

Here is quite a lot happening, let’s go trough it.

First we have created a very simple step process by having a step data property and showing conditional HTML content based on that property; we achieve this with v-if and v-else-if v-directives.

Our data property stepConfig tells our App what title, what button text and what the button-action should be. Notice that we use a function for stepConfig.nextStep; this is because we use the v-directive v-on on our button. This directive needs a function as a parameter. @click=”stepConfig[step].nextStep”

Our computed properties help us extract or filter the correct batters and topping for the donut selected by the user.

In order to store user Input we created an object userInput and we mapped the keys “userInput.donutId”, “userInput.batterId” and “userInput.toppingId” with v-model to the select.options HTML Tags. This way our App has always the most recent user input saved in this Object.

If you want to learn more about VueJS and become a VueJS Certified Developer, please take a look at our VueJS Course + Certificate.

Here is a visual version of our solution. Please note, we know VueJS, but we suck at Design.

VueJS Practice – #4 Vuex Store

VueJS Practice – #4 Vuex Store

Here we go again, another VueJS Practice. This time we’ll discuss a very important part of every VueJS Application – the Central Data Store or Vuex Store. Vuex is a VueJS Plugin and extends your Application with centrally available Data and Methods.

Another VueJS Tutorail and Practice by German IT Academy.

Problem / Task

We want to create a Part that is centrally available in our Application: A Shopping Cart. Generate three products in the Vuex Store as states. Create a ProductList.vue View and a ShoppingCart.vue Component. The ProductList.vue should display the products stored in vuex – include a button “Add to Cart”. “Add to Cart” should add the selected Product to a centrally available list, so that the cart list can be access from any other Component. In that view, import ShoppingCart.vue, which should display all Items in the Cart.

Hint

  • For the products: use an Array or Object in Vuex.
  • Displaying multiple UI elements can be done with v-for directive.
  • Centrally available list is nothing else than a list of centrally avaiable products.
  • In order to follow the best practices, consider using
    • Vuex Getters to retrieve data
    • Vuex Actions to modify Vuex States from the outside (e.g. VueComponent)

Solution

As always, let’s jump right into the code.

<template>
  <div class="ShoppingCart">
    <h3>Shopping Cart</h3>
      <p v-for="(item, key) in cart" :key="key">
        {{ products[item].name }}
      </p>
      <hr>
  </div>
</template>

<script>
export default {
  name: 'ShoppingCart',
  computed: {
    products: {
      get() {
        return this.$store.getters['allProducts']
      }
    },
    cart: {
      get() {
        return this.$store.getters['getCartItems']
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<template>
  <div class="home">
    <img alt="Vue logo" width="300" src="https://i0.wp.com/code.git-academy.com/wp-content/uploads/2019/10/400dpiLogo.jpg?zoom=1.100000023841858&fit=2077%2C1175&ssl=1">
    <hr>
    <ShoppingCart/>
    <ul>
      <li v-for="product in products" :key="product.id">
        <h1> {{product.name}}</h1>
        <h3> {{product.price}} $</h3>
        <button @click="addToCart(product.id)">Add to Cart</button>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import ShoppingCart from '@/components/ShoppingCart.vue'

export default {
  name: 'home',
  components: {
    ShoppingCart
  },
  methods:{
    addToCart(id) {
      this.$store.dispatch('addToCart', id)
    }
  },
  computed: {
    products: {
      get() {
        return this.$store.getters['allProducts']
      }
    }
  }
}
</script>

<style scoped>
li { 
  list-style-type: none;
  margin-bottom: 100px;
}
button {
  background-color: blue;
  color: white;
  font-size: 20px;
  border-radius: 25px;
  border: 1px solid black ;
}
</style>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    products: {
      0: {
        id: 0,
        name: 'VueJS T-Shirt black',
        price: 39
      },
      1: {
        id: 1,
        name: 'VueJS T-Shirt white',
        price: 39
      },
      2: {
        id: 2,
        name: 'VueJS T-Shirt blue',
        price: 39
      }
    },
    cart: []
  },
  getters: {
    allProducts(state) {
      return state.products
    },
    getCartItems(state) {
      return state.cart
    }
  },
  mutations: {
    pushCart(state, payload){
      state.cart.push(payload)
    }
  },
  actions: {
    addToCart(context, payload) {
      context.commit('pushCart', payload)
    }
  }
})

Below you can see the visual result of the above code. If you are interested in more VueJS Practice, examples and tutorials, feel free to enroll in our VueJS Course and get certified by German IT Academy.

VueJS Practice

In the store.js we specify out getters. Our products and cart are just lists in the vuex states object. When we press on “Add to Cart”, we initiate a Vuex Action called “Add to Cart” with “this.$store.dispatch(‘addToCart’, id)“. The ShoppingCart.vue simply iterates over the Vuex State Cart and prints out the items.

It’d be better to outsource the v-for loop in ProductList.vue into another Vue-Component ProductItem.vue. ProductList.vue would import ProductItem.vue as a child, and pass a product id. Then, ProductItem.vue could display the product by selecting it via id.