German IT Academy

Updates, Tutorials and Previews for our Premium Courses

You are a developer? Contribute!

VueJS Tutorial- #5 Component Relationships

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

We need

  • 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.

Hint

  • 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.
  • To create Vuex Getter that receives a parameter from the outside, read: https://vuex.vuejs.org/guide/getters.html

You can learn more about VueJS with our VueJS Course and get VueJS certified.

Solution

Source code:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    datasources: [
      {
        id:0,
        name:'Google Cloud Storage',
        interface: 'REST API',
        activated: true
      },
      {
        id:1,
        name:'AWS S3 Bucket',
        interface: 'REST API',
        activated: true
      },
      {
        id:2,
        name:'On-Deman Server Storage',
        interface: 'SSH',
        activated: false
      }
    ]
  },
  getters: {
    getAllDataSources(state) {
      return state.datasources
    },
    getDataSourceById: (state) => (id) => {
      for (let i = 0; i < state.datasources.length; i++) {
        if (state.datasources[i].id == id) {
          return state.datasources[i]
        }
      }
    }
  },
  mutations: {
  },
  actions: {
  }
})

We have the list as a state variable. We have to getters: one for every DataSource and one getter that will return only the Entry with the specified id.

<template>
  <div class="DataSourceItem">
    <h2 :style="activated()"> 
      {{this.datasource.name}}
    </h2>
    <h3> {{datasource.interface}}</h3>
  </div>
</template>

<script>
export default {
  name: 'DataSourceItem',
  props: {
    id: Number
  },
  computed: {
    datasource: {
      get(){
        return this.$store.getters.getDataSourceById(this.id)
      }
    }
  },
  methods: {
    activated() {
      if (this.datasource.activated) {
        return 'background-color:green;'
      }
      return 'background-color:red;'
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

The DataSourceItem.vue receives the id as a props. With that id the Component will retrieve the DataSource from Vuex Store. It’ll use the Vuex getter that we’ll define below.

<template>
  <div class="home">
    <img 
      alt="German IT Academy"
      width="200"
      src="https://i0.wp.com/code.git-academy.com/wp-content/uploads/2019/10/400dpiLogo.jpg?zoom=1.100000023841858&fit=2077%2C1175&ssl=1">
    <div v-for="datasource in datasources" :key="datasource.id">  
      <DataSourceItem :id="datasource.id"/>
    </div>
  </div>
</template>

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

export default {
  name: 'DataSourceList',
  components: {
    DataSourceItem
  },
  computed: {
    datasources: {
      get(){
        return this.$store.getters['getAllDataSources']
      }
    },
  }
}
</script>

German IT Academy hopes you learned something new with this VueJS Tutorial. You can learn more about VueJS with our VueJS Course and get VueJS certified.

The visual version of the solution looks like this.

VueJS Course and VueJS Certificate

Introduction to Ruby on Rails

Learn why Ruby on Rails can help speed up the development process. and why so many big companies rely on Ruby on Rails to run their business.

Serve Keras Model with Flask REST API

This tutorial will briefly discuss the benefits of serving a trained Machine Learning Model with an API. Then we will take a look at a precise example using a Keras Model and Python Flask to serve the model. You'll learn how to Serve Keras Model with Flask REST API....

How to create a WordPress Plugin

Introduction What is WordPress? A technical definition is "WordPress is an open source content management system (CRM) built in PHP". Currently WordPress is the most popular CRM available for free! If you've ever used WordPress, you definitely know about themes &...

Getting started with PHP 7 in 2020

What is PHP? PHP stands for Hypertext Preprocessor (earlier called "Personal home page"). It is an open source scripting language created for the web development. PHP is a server-side language which means all the code is rendered on server and only static HTML, CSS...

Complete Vue.js 3 Guide

This is the first and most comprehensive Guide to Vue.js 3. We give an overview of the Changes, an introduction in usage of VueJS3 with Example Codes.

IT Career Path Nobody Is Discussing

Whatever path you decide on, we will help you find out the ideal things to do to take. Your career path contains the jobs you should hit your final career objective. While the career path will appear different for everybody, aiming to acquire equal parts experience in...

Awesome Future of Frontend in 2020

Before we dive in to Future of Frontend in 2020. Let's begin with some basics as we gradually get more forward-looking. We obviously cannot know what technology will dominate in 2020 and what framework will pop up. But we can try at least. What is frontend? Frontend...

How to Run Moodle with Docker Compose

How to run moodle with docker and docker-compose. Tutorial how use moodle in a docker container with docker-compose and Dockerfile.

Node.JS Tutorial: REST API & CRUD Operations

The following Tutorial will guide you through creating a simple REST API and CRUD Operations. Our Stack is ExpressJS, Mongoose and MongoDB. This API will perform CRUD Operations on Data stored in MongoDB. It's best to start from scratch and try creating this app by...

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....