Vue - Components - Common wrapper template

Using slots. The HTML wrapping which all blocks need is in one template.

by Ben Clayton

HTML

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

<div style="border:1px solid red;font-size:12px;">
Header
</div>

<div id="pe-content">

    <div>
    
    <holo-apple :properties="{qty:66,content:'<holo-pear>PP</holo-pear>'}"></holo-apple>

    <holo-pear></holo-pear>

    <holo-peach></holo-peach>

    </div>

</div>



<script id="vue-tmpl-apple" type="text/x-template">
    <holo-block>
    	APPLE {{qty}}<br/>
      <span v-html="content">xx</span>
    </holo-block>
</script>

<script id="vue-tmpl-pear" type="text/x-template">
    <holo-block>
    	PEAR {{qty}}
    </holo-block>
</script>
<script id="vue-tmpl-peach" type="text/x-template">
    <holo-block>
    	PEACH {{qty}}
    </holo-block>
</script>

<script id="vue-tmpl-block" type="text/x-template">
	<div class="block">
  <button @click="collapse()">V</button>
	<slot v-if="visible"></slot>
  </div>
</script>

CSS

body {
  font-size: 20px;
}

.text {
  font-size: 24px;
}

.block {
  border: 1px solid red;
  padding: 20px;
  margin-top: 20px;
  overflow: visible;
}

.block button {
  float: right;
  width: 20px;
  height: 20px;
  top: -20px;
  right: -20px;
  position: relative;

}

JavaScript

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

Vue.component('holo-block', {
  template: "#vue-tmpl-block",
  props: ['properties'],
  data:function(){
  	return {visible:true}
  },
  methods: {
		isArray : function () {
    	return (typeof this.properties.length != 'undefined')
    },
    collapse : function (){
    	this.visible = ! this.visible;
    }
  },
  created: function () {
  	//console.log("properties:",this.properties);
  }
});

//---------------------------------------------------------
Vue.component('holo-apple', {
  template: "#vue-tmpl-apple",
  props: ['properties'],
  data:function(){
  	return {
    	qty:2,
      content:''
   }
  },
  created: function () {
  	this.qty = this.properties.qty;
    this.content = this.properties.content;
  }
});

Vue.component('holo-pear', {
  template: "#vue-tmpl-pear",
  data:function(){
  	return {qty:3}
  }
});

Vue.component('holo-peach', {
  template: "#vue-tmpl-peach",
  data:function(){
  	return {qty:4}
  }
});

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

new Vue({ // create a root Vue instance
  el: '#pe-content', // this div gets replaced when View is rendered
  template: '#pe-content'
});