Vue.js Props

This file is actually a combination of 2 different Vue files; App.vue (the parent component) and Muscle.vue (the child component).

Using Vue.js props you can take the data out of the child component and instead put it into the parent component and pass it to the child using props. The parent needs to hand it off and the child needs to receive it.

Hand off from the parent component (App.vue) vue file: App.vue line 69: The muscles data object is defined and on line 48 v-bind:muscles="muscles" is what hands off the data to the child component (Muscle.vue).

Receipt of data (prop) from App.vue within Muscle.vue is subtle; on line 21 you could have easily just have defined the entire data set under muscles but instead, by naming convention, it receives the prop data from the parent instead. The rest of the child component (Muscle.vue) continues to work exactly as if the data was defined on line 21.

Lines 22 and 23 represent validation; type:Array indicates the data type and reqired: true says it has to be there. These are good for a dev environment as the errors will appear in the browser console upon inspection.

<!--Muscle.vue-->

<!--component template-->
<!-- thanks to https://www.youtube.com/watch?v=6-us2D7GQCk&list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa&index=21 -->

<template>
	<div id="muscles">
		<ul>
			<li v-for="muscle in muscles" v-on:click="muscle.show = !muscle.show">
				<h2>{{muscle.name}}</h2>
				<h3 v-show="muscle.show">{{muscle.area}}</h3>
			</li>
		</ul>
	</div>
</template>


<script>
	export default {
		props:{
			muscles:{
				type:Array,
				required: true
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

<!-- add "scoped" attribute to style tag to ensure that only elements in this component get style applied, else it goes global -->
<style scoped>

</style>


<!-- end Muscle.vue-->


<!-- start App.vue-->

<template>
  <div>
    <app-header></app-header>
	<app-muscles v-bind:muscles="muscles"></app-muscles>
	<app-footer></app-footer>
  </div>
</template>

<script>

	import Header from './components/Header.vue';
	import Footer from './components/Footer.vue';
	import Muscles from './components/Muscle.vue';

export default {
	  components{
		'app-header':Header;
		'app-footer':Footer;
		'app-muscles':Muscles;
	  },
  
  name: 'app',
  data () {
    return {
      muscles:[
			{name: 'Pectoralis', area:'Chest', show:false},
			{name: 'Biceps', area:'Arm', show:false},
			{name: 'Triceps', area:'Arm', show:false},
			{name: 'Latissimus', area:'Back', show:false},
			{name: 'Quadriceps', area:'Leg', show:false},
			{name: 'Soleus', area:'Calf', show:false}
		]
    }
  }
}
</script>

<style>
	#app {
	  font-family: 'Avenir', Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	  margin-top: 60px;
	}

	h1, h2 {
	  font-weight: normal;
	}

	ul {
	  list-style-type: none;
	  padding: 0;
	}

	li {
	  display: inline-block;
	  margin: 0 10px;
	}

	a {
	  color: #42b983;
	}
	</style>

	<!-- end App.vue-->