Vue Js没有在select2中获取选择选项值答案

【问题标题】：Vue Js did not get select option value in select2Vue Js没有在select2中获取选择选项值
【发布时间】：2020-04-25 21:22:11
【问题描述】：

我在关键时刻卡住了，同时使用 vue 和 laravel。我使用 select2 并显示我选择的选项及其值。当我要提交表单时，选定的选项第一次不会返回它的值，但第二次如果我要再次选择我的选项，它会起作用。我需要帮助

这是我的 laravel Blade 模板：

<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();   
        },
    });

【问题讨论】：

标签： javascript laravel vue.js jquery-select2

【解决方案1】：

我不太确定您要达到的目标。如果您尝试创建分类帐列表，您的代码需要进行一些修改。

所以目标是：

从您的选择中选择一个选项
点击添加
所选值将存储在数组中

您的代码中的第一个问题是 select v-model 属性中的拼写错误。其次，当您选择一个值时，legeder_cash_in.income 将为 1，但您并未将该值推送到您的数组中，而是将其附加到一个新对象，其中包含以 '' 作为值的关键收入。

您可以查看here。因此，如果您尝试拥有一个带有收入键的对象数组，其中该键的值是您选择的选择选项，您应该首先向实例添加一个新变量以保存输入中的选定值，然后您的 AddNewRow 方法，您可以推送一个带有收入键的对象，该键包含您创建的新变量。

像这样：

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>

here 是一个工作示例。

这有意义吗？

【讨论】：