Vue Js did not get select option value in select2

Question

I am stuck in a critical moment, while using vue with laravel. i use a select2 and show my selected option with its value.when i am going for form submission , selected option won't return its value first time, but in second time if i going to select my option again , it work. i need help

Here is my laravel Blade Template:

<select name="income[]" id="" v-model="ledger_cash_in.income" class="js-example-basic-single">
    <option value="">...</option>
    @foreach ($ledger_category as $cat)
    <optgroup label="{{ $cat->inv_ledg_cat_category_name }}">
        @foreach ($cat->getLedgers as $ledg)
            <option value="{{ $ledg->inv_ledg_id }}">{{ $ledg->inv_ledg_ledger_name }}</option>
        @endforeach
    </optgroup> 
    @endforeach
</select>
<button type="button" class="btn btn-success btn-xs" @click="addNewRow()">
    <i class="fa fa-plus"></i>
</button>

And this my Vue Code

var app = new Vue({
        el: "#ledger",
        data: {
            ledger_cash_ins: [],
        },
        methods:{
            addNewRow() {
                this.ledger_cash_ins.push({
                    income: '',
                    });
                }
        },
        beforeMount(){
            this.addNewRow();   
        },
    }); 

Answer 1

I'm not quite sure what you are trying to achieve. If you are trying to create a list of ledgers your code need some modifications.

So the goal is to:

1. Select an option from your select
2. Click add
3. The selected value will be stored in an array

The first problem in your code is a typo in the select v-model property.. Secondly, when you select a value legeder_cash_in.income will be 1 but you are not pushing that value to your array, instead you are appending it a new object with a key income with '' as value.

you can check it out here . So if you are trying to have an array of objects with a income key in which the value of that key is the select option you have selected you should first add a new variable to the instance to hold the selected value from the input and then on your AddNewRow method you could push an object with a income key that holds that new variable you've created.

like this:

var app = new Vue({
    el: "#ledger",
    data: {
        selectedValue: '',
        ledger_cash_ins: [],
    },
    methods:{
      addNewRow() {
        this.ledger_cash_ins.push({
          income: this.selectedValue,
        });
      }
    }
});

and in your HTML change the v-model to selectedValue:

<select name="income[]" id="" v-model="selectedValue" class="js-example-basic-single">
 <option value="">...</option>
 <option value="1">Ledger 1</option>
 <option value="2">Ledger 2</option>
 <option value="3">Ledger 3</option>

 @foreach ($ledger_category as $cat)
  <optgroup label="{{ $cat->inv_ledg_cat_category_name }}">
   @foreach ($cat->getLedgers as $ledg)
    <option value="{{ $ledg->inv_ledg_id }}">{{ $ledg->inv_ledg_ledger_name }}</option>
   @endforeach
  </optgroup> 
 @endforeach
</select>

<button type="button" class="btn btn-success btn-xs" @click="addNewRow()">
 <i class="fa fa-plus"></i>Add
</button>

here is a working sample.

Does that make sense?