javascript - 将参数传递给 Vue.js 中 multiselect 的 @select - vue-multiselect

Question

我正在尝试将参数传递给 Vue.js 中的 @select 事件函数

HTML

 <template>
    <div class="container">

<div v-for="(billItem, k) in billItems" :key="k" >
    <div class="form-group row">
        <label class="col-form-label col-sm-3" for=""> Products</label>
        <div class="col-sm-3">
        <div class="form-group">
            <label for="">Product</label>
            <multiselect 
                v-model="billItem.billItem_selectedGood" 
                :options="productOptions" 
                :close-on-select="true" 
                :clear-on-select="false" 
                :hide-selected="true" 
                :preserve-search="true" 
                placeholder="Select Product" 
                label="name" 
                track-by="name" 
                :preselect-first="false"
                id="example"
                @select="onSelect_selectedGood"
            >
            </multiselect>
        </div>
    </div>
</div>

</div>
</template>

JS

<script>

export default {
  data(){
    return {
      form: new Form({
      })
    }
  },
  methods : {
    onSelect_selectedGood( option, id) {
      console.log("onSelect_selectedGood");
      console.log(option);
    }
  },
  mounted() {
      
  }
}
</script>

我的问题:如何将billItem传递给onSelect_selectedGood，以便我可以在函数内访问它。

类似的东西 @select="onSelect_selectedGood(billItem)" 然后实现这样的函数 onSelect_selectedGood( billItem, option, id)

让我知道如何实现它。

Answer 1

你可以简单地这样做:

 @select="onSelect_selectedGood($event,billItem)"

在你的方法中:

 methods : {
   onSelect_selectedGood( selectedOption,billItem) {
      console.log(  selectedOption,billItem);

   },
}

传递的参数是$event，即selectedOption和billItem。