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

Posted 2023-05-07

【中文标题】Vue Js没有在select2中获取选择选项值

【英文标题】：Vue Js did not get select option value in 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();   
        ,
    ); 

【参考方案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 是一个工作示例。

这有意义吗？