Vue

by tanvir_alam_shawn

HTML

<div id="app">
  <div class="algorithmContent">
    <button type="button" v-on:click="addFormElement('property')">Add Group</button>
  
    <component v-for="field in fields" v-bind:is="field.type" :key="field.id"></component>
  </div>
</div>

<script type="x-template" id="property">                 
  <div class="algorithmContent">
		<button type="button" v-on:click="addFormElement('property')">Add Group</button>
    <component v-for="field in fields" v-bind:is="field.type" :key="field.id"></component>
  </div>
</script>

<script type="x-template" id="group">
  <div>
    <label>Select</label>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.algorithmContent {
  border: #a5acb4;
  border-style: solid;
  padding: 40px;
  border-radius: 12px;
}

.algorithmDropdown {
  position: absolute;
  display: inline-block;
  margin-top: -11px;
  margin-left: 10px;
}

Vue

Vue.component('property', {
  template: '#property'
});

Vue.component('group', {
  template: '#group'
});


new Vue({
  el: '#app',
  data: {
    fields: [],
    count: 0
  },

  methods: {
    addFormElement: function(type) {
      this.fields.push({
        'type': type,
        id: this.count++
      });
    }
  }
})