If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.
Vue.js uses these things called "props" to pass data from a parent component to a child component. Here's how:
<!--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-->