JSFiddle - React, Tailwind, and code Playground

by Chris Bao

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
 <array id="demo">
   <input type="text" value="enter some text..."/><my-custom-component></my-custom-component>
 </array>

JavaScript

Vue.component('my-custom-component', {
	template:'"<input type="text" value="my-custom-component"/>'
});


var wrapper = {
	render: function (h) {
		return h('div', {class:'array-item-wrapper', style : {display:'inline-block', float:'left'}}, this.$slots.default)
	}
}


Vue.component('array', {
	data: function(){
		return {
			renderData : [{}]
		}		
	},

	render: function (h) {
		var _this = this;

		return h('div', {class:'array'},
			this.renderData.map(function(el, index, obj){
				return h('div', {key : el, class:'array-item', style : {clear:'both'}}, 
					[
						h(wrapper, {slot:'default',attrs:{index : index}}, _this.$slots.default),
						//button [-] :
						obj.length > 1      ? h('input',  {style:{'margin-left':'0.5%'}, attrs:{type:'button', value:'-', index : index}, on:{click:_this.del} } ) : null, 
						//button [+] :
						index==obj.length-1 ? h('input',  {style:{'margin-left':'0.5%'}, attrs:{type:'button', value:'+'}, on:{click:_this.add} } ): null
					]
				)
			})
     )
  },

	methods: {
		add : function(){
			this.renderData.push({});
		},
		del : function(el){
			this.renderData.splice( el.srcElement.attributes.index.value , 1);
		}
	}
})

var demo = new Vue({
  el: '#demo'
})