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.

Do you want to only dynamically add another select field or the whole form ? — Muhammad Atif Akram
– Muhammad Atif Akram, Commented Apr 13, 2021 at 7:08
yes.even i can add more. but problem is when it try to change first select option form first one it also changes the other item(cloned item) too. — Ahmed Sohel
– Ahmed Sohel, Commented Apr 13, 2021 at 7:12

Muhammad Atif Akram · Accepted Answer · 2021-04-13 07:30:00Z

0

Create a separate component for Drop down list like shown in following image.
This component will receive the drop down options as props.
Now import it inside the main component lets say App.vue
initialize a variable lets say count to either 0 or 1 by default.
Bind that variable to Add + button so that on every click of that button the count variable will increment by one.
use that count variable as for loop and inside that loop call that Drop down component as shown in following image.
As you click the button, it will increment the count and also add another dropdown as shown in following image.

answered Apr 13, 2021 at 7:30

Muhammad Atif Akram

1,3351 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmed Sohel Over a year ago

But i have already done this.My problem is when i try to change the product unit type for first item it also call the same function for other's clone section too. now i need to change only specific select item and its dependency without changing other's item.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related