Vue - Accordion Component

Using slots, and Vue's 'slot-scope'

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>

<div id="blockmenu"></div>


<hr>

<script id="tmpl-hello-world" type="text/x-template">
    <div>
    	Hello World {{ user }} {{ global.name }}
      <input v-model="global.name" />
    </div>
</script>


<script id="tmpl-blockmenu" type="text/x-template">
  <div>
    {{ global.name }}
    <accordion :global="global">
			 <accordion-item n=0 scope="accordionScope">Content 0 {{ global.name }}</accordion-item>
			
       <accordion-item n=1 scope="accordionScope">Content 1 {{ global.name }}</accordion-item>

			<accordion-item n=2 scope="accordionScope">Content 2 {{ global.name }}</accordion-item>
		</accordion>
</div>
</script>


<script id="tmpl-accordion" type="text/x-template">
  <div class="box">
   {{ global.name }}<br>
  	<slot :currentIdx="currentIdx">
    </slot><br>
  </div>
</script>


<script id="tmpl-accordion-item" type="text/x-template">
 <div>
   <div @click="select"> +--------- </div>
  <slot v-if="n==accordionScope.currentIdx"></slot>
 </div>
</script>


<!-- <hello-world user="fred" :global="global"></hello-world> -->

CSS

body {
	    font-size: 20px;
}

.text {
	font-size: 24px;
}
.box {
  border: 1px solid red;
}

JavaScript

Vue.component('hello-world', {
  template: "#tmpl-hello-world",
  props: ['user','global'],
  created: function () {
  	//console.log("article properties:",this.properties);
  }
});

Vue.component('accordion-item', {
  template: "#tmpl-accordion-item",
  props: ['n','acc'],
  created: function () {
  	//console.log("article properties:",this.properties);
  },
  methods :{
  	'select': function(){}
  }
});
//---------------------------------------------------------

Vue.component('accordion', {
  template: "#tmpl-accordion",
  props: ['global'],
  data: function(){
  		return { currentIdx:0 }
  },
  created: function () {
  	//console.log("article properties:",this.properties);
  	this.global.name = "sid";
  }
});

//---------------------------------------------------------

new Vue({ // create a root Vue instance
  el: '#blockmenu', // this div gets replaced when View is rendered
  template: '#tmpl-blockmenu',
  data: function(){
  	return { global: { name: null } }
  }
});