VueJS Tutorial- #5 Component Relationships

Want to become an expert in Python 3 and Django 3?

Don’t Miss the #TwitterFiles!

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
Andrey Bulezyuk
Andrey Bulezyuk

Andrey Bulezyuk is a Lead AI Engineer and Author of best-selling books such as „Algorithmic Trading“, „Django 3 for Beginners“, „#TwitterFiles“. Andrey Bulezyuk is giving speeches on, he is coaching Dev-Teams across Europe on topics like Frontend, Backend, Cloud and AI Development.

Protocol Wars

Understanding the Key Players: Ethernet, Wi-Fi, Bluetooth, and Zigbee The Invisible Battles: How Data Streams Clash in the Airwaves Adapting to an Evolving Tech Landscape: New Contenders and Challenges User Empowerment: How Our Choices Determine the Winning Protocol...

Google Earth 3D Models Now Available as Open Standard (GlTF)

Unleashing the Power of 3D: A Comprehensive Guide to Google Earth's GlTF Models From Virtual to Reality: How to Utilize Google Earth's GlTF Models for Your Projects Breaking Down the Barriers: The Impact of Open Access to Google Earth's 3D Models on the IT Industry...

When you lose the ability to write, you also lose some of your ability to think

Reviving the Creative Process: How to Overcome Writer's Block in IT Staying Sharp: Techniques for Keeping Your Mind Active in the Tech World From Pen to Keyboard: Transitioning Your Writing Skills to the Digital Age Collaboration and Communication: The Importance of...

Reverse engineering Dell iDRAC to get rid of GPU throttling

Understanding Dell iDRAC: An Overview of Integrated Remote Access Controller Breaking Down the Barriers: How to Disable iDRAC GPU Throttling for Maximum Performance Optimizing Your Dell Server: Tips and Tricks for GPU Throttle-Free Operation Maintaining Stability and...

0 Comments