Vue

by RomainMazB

HTML

<div id="app">
  <div>
    <myComponent v-for="my-component in my-components"></myComponent>
  <button type="submit" class="btn btn-primary" name="factory"  @click.prevent="more()">
    more 
  </button>
</div>

CSS

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

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

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('myComponent', {
  data: function () {
    return {
      showfact:[{id:'',FactoryName:'',selectedFact2:''}],
   model:[{  
                ModelName:'',
                Descriotion:'',
              }],
    }
  },
  template: '<div class="form-group input-group" v-for="(mode , index) in model" :key="index"><select  v-model="showfact.selectedFact2"><option v-for="(show  , index ) in showfact" :key="index" :value="{id:show.id,FactoryName:show.FactoryName}" >{{show.id+" :"}} {{show.FactoryName}} </option></select> {{ showfact.selectedFact2 }} <br><input type="text" class="form-control"   v-model="mode.ModelName">{{ mode.ModelName }} <br><input type="text" class="form-control"  v-model="mode.Descriotion">{{ mode.Descriotion }} <br></div></div>'
})

new Vue({
  el: "#app",
  data: {
     
  },
  methods: {

          more(){
        },
        
   /*     getFactory(){
      axios.get('/showfactory').then(function(response){
               this.showfact=response.data;
      })
},                  */
              
}

})