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.
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”
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.
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.
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.
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.
Welcome to another VueJS Tutorial. Let’s explore a very important topic in VueJS: the relationship between your Vue-Components. It’s crucial because everything is importing everything from everywhere anytime…or something like this.
For those who are new to VueJS Tutorial / VueJS Practice: we create a fictional problem / task for you to solve. To go through it and try and code a solution that would solve the issue. Then you compare it with the solution provided by German IT Academy.
Problem / Task
create DataSourceList.vue that reads from state ‘datasources’ in vuex store.
For every Entry in the ‘datasources’ list, embed a a DataSourceItem.vue in the DataSourceList.vue.
DataSourceItem Component receives the props ‘id’ from the Parent. With that id the Child fetches all the data from ‘datasources’ in vuex store and displays them.
DataSourceItem Component receives a slot from the Parent and displays the content in a random place.
When importing a Vue-Component, do not forget to also import it inside the Parent Instance
As reminder, props are those data values that you pass to a child as a HTML Tag Attribute (:propName=data) and slot is the data between the HTML Opening and Closing tag.
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.
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.
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)
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.
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.
Learning by doing – VueJS Practice part 2. Let’s take a look at how a possible school-like question on your VueJS Test would look like. And how you would go about solving it. Btw if you want to dive deep into VueJS 2, take a look at our VueJS Certificate Course.
You need to create routes for the Vue-Components that we created in the previous VueJS Practice. Create a vue-route (use Vue-Router) for each of the following Components:
AssetsDetail.vue and AssetsList.vue
ProductsDetail.vue and ProductsList.vue
UsersDetail.vue and UsersList.vue
Routes for “*Detail.vue” Components must have a url parameter “id”. Router for “*List.vue” Components must have a url parameter “page”. Also, create a Vue Component called “navigation/TopMenu.vue” where you generate a list of router-links to the previously created routes; use a programmatic approach.
Vue-Router is the obvious choice for a simple routing task like this.
Regarding URL Parameters you cheat by reading about Dynamic Routing at Vue-Router Official Docs.
VueJS Practice – Solution
To define your router with Vue-Router, you need to write your routings to router.js. Here is how our prototype looks like.
The TopMenu.vue Component has two benefits. First, it helps you debug your router.js while you are creating your routes configuration. Second, you can import the TopMenu to the most Upper VueComponent. This ways, if a route changes, your will have adjust the TopMenu.vue only, and the whole App will be updated. This is what i came up with for the Menu.