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