Tengo un botón Agregar, al hacer clic en ese botón, un menú desplegable debería agregarse automáticamente, y luego, si hago clic en él nuevamente, debería agregar ese menú desplegable nuevamente. Cuando se agrega un menú desplegable, elijo una opción de las opciones disponibles y luego hago clic en el botón Agregar nuevamente para agregar un menú desplegable más debajo, el menú desplegable se agrega pero se agrega con la opción que elegí para el primer menú desplegable.

Código: HTML:

 <div> <button class="button btn-primary" @click="addRow">Add row </button> </div> <div class="form-group row" v-for="(row,index) in addRowArr"> <div class="col-md-3"> <label>DropDown: </label> <b-input-group left="<i class='fa fa-location-arrow'></i>"> <basic-select :options="SupplyChainArray" :selected-option="SupplyChaindata" @select="SupplyChainobject" v-model="SupplyChain" name="SupplyChain" id="SupplyChain" placeholder="Select SupplyChain"> </basic-select> </b-input-group> </div> </div>

JavaScript:

 export default{ data(){ return(){ addRowArr : [], SupplyChainArray : [{value:1, text:"B2C_HEAVIES"}, {value:2, text:"second"}, {value:3, text:"third"}], SupplyChaindata: {}, SupplyChain: '', } }, methods:{ addRow(){ this.addRowArr.push({}) }, SupplyChainobject(obj) { this.SupplyChaindata = obj; this.SupplyChain = obj.value; }, } }

Para referencia, vea la imagen adjunta: