Vue Js не получил значение опции выбора в select2

Question

Я застрял в критический момент, при использовании vue с laravel. Я использую select2 и показываю выбранную опцию с ее значением. Когда я иду на отправку формы, выбранная опция не возвращает свое значение в первый раз, но во второй раз, если я собираюсь выбрать свою опцию снова, она работает. Мне нужна помощь

Вот мой laravel Шаблон лезвия:

<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>

А это мой Vue Код

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

Answer 1

Я не совсем уверен, чего вы пытаетесь достичь. Если вы пытаетесь создать список бухгалтерских книг, ваш код нуждается в некоторых модификациях.

Таким образом, цель заключается в следующем:

1. Выберите один из вариантов выбора
2. Нажмите add
3. Выбранное значение будет сохранено в массиве

Первая проблема в вашем коде - это опечатка в свойстве select v-model. Во-вторых, когда вы выбираете значение legeder_cash_in.income будет равно 1, но вы не помещаете это значение в свой массив, вместо этого вы добавляете ему новый объект с ключевым доходом со значением ''.

вы можете проверить его здесь . Поэтому, если вы пытаетесь получить массив объектов с ключом дохода, в котором значение этого ключа является выбранной вами опцией выбора, вы должны сначала добавить новую переменную в экземпляр, чтобы сохранить выбранное значение из входных данных, а затем включить В вашем методе AddNewRow вы можете создать sh объект с ключом дохода, который содержит созданную вами новую переменную.

вот так:

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

и в вашем HTML измените v-model на 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>

здесь является рабочий образец.

Имеет ли это смысл?