CSS Property Value from Class Name

Vue.component('parent1', {
  template: '<div><dropdown-menu :menu="link" :parent="top_bar"></dropdown-menu></div>',
  data () {
      return {
          link: 'a link',
          top_bar: 'parent1'
      }
  }
});

Vue.component('parent2', {
  template: '<div><dropdown-menu :menu="link" :parent="top_bar"></dropdown-menu></div>',
  data () {
      return {
          link: 'another link',
          top_bar: 'parent2'
      }
  }
});

Vue.component('dropdown-menu', {
  template: '<div class="dropdown" v-bind:class="parent">{{ menu }}</div>',
  props: ['parent', 'menu']
});

var vm = new Vue({
  el: '#app'
});

.parent1 {
    color: red;
}

.parent2 {
    color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>

<div id="app">
  <parent1></parent1>
  <parent2></parent2>
</div>

How to get CSS class property in Javascript?

For modern browsers you can use getComputedStyle:

var elem,
    style;
elem = document.querySelector('.test');
style = getComputedStyle(elem);
style.marginTop; //`20px`
style.marginRight; //`20px`
style.marginBottom; //`20px`
style.marginLeft; //`20px`

margin is a composite style, and not reliable cross-browser. Each of -top -right, -bottom, and -left should be accessed individually.

fiddle

Append text, when property value is equal to css class name

Your if condition seems to be wrong. It could look like this:

if(index.classList.contains(ind.slot)){
  index.innerText = ind.name;
}

Now you have another problem: the divs are not created in order. First, you are creating the div for slot two, and then the div for slot one. The texts are inserted correctly, however the slots are in the wrong order. If you change people to look like this, it should work again:

const people = [
  {name: 'Tim', slot: 'one'},
  {name: 'Tom', slot: 'two'}
];

If you want the elements to be sorted automatically, you can change your people array to use numbers for the slots. That way, you can sort them:

var people = [
  {name: 'Tom', slot: 2},
  {name: 'Tim', slot: 1}
];

people.sort((personA, personB) => {
  return personA.slot - personB.slot
});

With those changes, your code should now work. Here's a working snippet:

const body = document.querySelector('body');
var people = [  {name: 'Tom', slot: 2},  {name: 'Tim', slot: 1}];
people.sort((personA, personB) => {  return personA.slot - personB.slot});
const createDiv = (arg) => {  const div = document.createElement('div');
  div.classList.add('name', arg.slot);
  body.append(div);
  const namesClass = document.querySelectorAll('.name');
  people.forEach((ind)=>{    namesClass.forEach((index)=>{      if(index.classList.contains(ind.slot)){        index.innerText = ind.name;      };    });  });
  return div;}
const render = () => {  people.forEach(function(index){    createDiv(index);  });}
render();

.m-t-10{ margin-top: 10px }
.m-t-20{ margin-top: 20px }
.m-t-30{ margin-top: 30px }
/* etc margin */

.p-t-10{ padding-top: 10px }
.p-t-20{ padding-top: 20px }
.p-t-30{ padding-top: 30px }
/* etc padding */