Vue router

Vue router

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.1.1/vue-router.js"></script>
<div id="app">
  <greeting></greeting>
</div>

JavaScript

Vue.component('greeting', {
	template: '<div>
			<button @click='toggleShow' class='instrument-button'>{{this.activeInstrument}}</button>
			<div v-if='show' class='instrument-list'>
				<div class='instrument' v-for='instrument in this.instruments' @click='itemClicked(instrument)'>{{instrument}}</div>
			</div>
		</div>',
	props: ['message']
});

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