How can i add / change multiple select option dynamically usign vuejs from same form

Question

I have shared my code below.

<template>
        <div class="productUnitPrice">
            <div class="row">
                <h4>Product Bundle</h4>
                <div v-for="(unitPackage,index) in this.UnitPackages" class="col-lg-12" style="margin-bottom: 5px; background: #ddd">
                    <div class="pull-right text-right">
                        <!--increase and decrease row quantity -->
                        <button type="button"  v-on:click="AddUnitPackage(index)" class="btn-info btn btn-success text-right pull-right btn-sm">+</button>
                        <span v-if="index > 0">
                            <button type="button"  v-on:click="removeUnitPackage(index)" class="btn-info btn btn-success text-right pull-right btn-sm">-</button>
                        </span>
                    </div>

                    <div style="padding:10px 0px">
                        <h6 class="heading"><strong>Select Product Unit </strong></h6>
                        <select :key="index" name="unit_type_id[]" v-model="unitPackage.unit_type_id" @change="getUnitQuantity(unitPackage.unit_type_id,index)">
                            <option class="text-danger" :value="null">Select Product Unit</option>
                            <option v-for="unitType in unitTypes" :value="unitType.id" class="text-danger">
                                {{unitType.unit_type}}
                            </option>
                        </select>
                    </div>

                    <div v-if="unitPackage.unit_type_id">
                        <h6 class="heading"><strong>Select Quantity</strong></h6>
                        <select :key="index" name="unit_quantity_id[]" v-if="unitPackage.unit_type_id !== null" v-model="unitPackage.unit_quantity_id">
                            <option class="text-danger" :value="null">Select Product Quantity</option>
                            <option v-for="unitQuantity in unitQuantities" :value="unitQuantity.id" class="text-danger">
                                {{unitQuantity.quantity}}
                            </option>
                        </select>
                    </div>

                    <div v-if="unitPackage.unit_type_id">
                        <h6 class="heading">
                        <strong>Select Unit Price</strong></h6>
                        <input type="text" class="form-control" v-model="unitPackage.price" name="price[]" placeholder="price">
                    </div>

                    <div v-if="unitPackage.price">
                        <h6 class="heading">
                            <strong>Previous Price</strong></h6>
                        <input type="text" class="form-control" v-model="unitPackage.previous_price" name="previous_price[]" placeholder="Previous Price">
                    </div>

                    <div v-if="unitPackage.previous_price">
                        <h6 class="heading">
                            <strong>Unit Stock</strong>
                            <p>put blank if unit_stock is unlimited </p></h6>
                        <input type="text" class="form-control" v-model="unitPackage.unit_stock" name="unit_stock[]" placeholder="Unit Stock">
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        import Api from "../../../api/api";
        export default {
            components: {

            },
            data(){
                return{
                    UnitPackages: [
                        {   index:0,
                            unit_type_id:null,
                            unit_quantity_id:null,
                            price:null,
                            unit_stock:null,
                            previous_price:null
                        }
                    ],
                    unitTypes:[],
                    unitQuantities:[],
                }
            },
            methods:{
                getUnitQuantity(unit_type_id,index){             
                   // this.UnitPackages.unit_type_id = unit_type_id;
                    Api().get('product_unit_types',{
                        params:{
                            unit_type_id:unit_type_id
                        }
                    })
                        .then(response =>{                              
                             this.unitQuantities = response.data;                  
                        })
                        .then(json => console.log(json))
                },


                AddUnitPackage(index){
                    this.UnitPackages.push({                          
                        index: index+1,
                        unit_type_id:null,
                        unit_quantity_id:null,
                        price:null,
                        unit_stock:null,
                        previous_price:null
                    });
                },
                removeUnitPackage(index){
                    this.UnitPackages.splice(index,1);
                },
            },


            mounted() {
                Api().get('/product_unit_types')
                    .then(response =>{
                        this.unitTypes = response.data.data;
                        console.log(response)
                    })
                    .then()
            }
        }
    </script>

i want to add multiple select data dynamically. when i click '+' sign it will clone same form but if i change the first item it also changes the other section too. how can i call and change specific select item.

i want to add multiple select data dynamically. when i click '+' sign it will clone same form but if i change the first item it also changes the other section too. how can i call and change specific select item.

Answer 1

1. Create a separate component for Drop down list like shown in following image.

2. This component will receive the drop down options as props.

3. Now import it inside the main component lets say App.vue

4. initialize a variable lets say count to either 0 or 1 by default.

5. Bind that variable to Add + button so that on every click of that button the count variable will increment by one.

6. use that count variable as for loop and inside that loop call that Drop down component as shown in following image.

7. As you click the button, it will increment the count and also add another dropdown as shown in following image.