Vue.js Nesting Components - Part 3 Body

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 components to break down and separate functionality into specific files. Here's how:

Vue.js Components

This file is the Muscle.vue file of the components used in this mini app.

This is the main body of this mini Vue.js application, and has some pretty basic Vue.js functionality.

In the <li> tag on line 7 is a loop and an v-on:click call that displays each of the data elements from the
Vue.js data object. On click the associated data is automatically displayed; click again and it gets hidden.


<!--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 {
		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>

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

</style>


Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-nesting-components-part-3-body/