Pass parameters to @select of multiselect in Vue.js - vue-multiselect

Question

I am trying to pass parameter to @select event function in Vue.js

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>

My Question: How can I pass billItem to onSelect_selectedGood so I can access it inside the function.

Something like @select="onSelect_selectedGood(billItem)" then implement the function like this onSelect_selectedGood( billItem, option, id)

Let me know how I can achieve it.

@Ohgodwhy am using this library vue-multiselect ( vue-multiselect.js.org ) — ikuchris
– ikuchris, Commented May 6, 2019 at 20:54

Boussadjra Brahim · Accepted Answer · 2019-05-06 21:48:36Z

8

You could do it simply like :

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

and in your methods :

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

   },
}

the passed parameters are the $event which is the selectedOption and billItem.

edited May 6, 2019 at 21:48

answered May 6, 2019 at 20:58

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ittus · Accepted Answer · 2019-05-06 21:03:26Z

0

If you want to access all billItem, option and id, you can create a custom input component:

CustomInput.vue

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

<script>
export default {
  props: ['billItem'],
  methods: {
    onSelect_selectedGood( option, id) {
      console.log("onSelect_selectedGood");
      console.log(option);
      console.log(this.billItem)
    }
  }
}
</script>

and then using it in your html:

<custom-input 
  :billItem="billItem"
/>

Because you passed billItem as a prop, you can access it by this.billItem in custom component.

answered May 6, 2019 at 21:03

ittus

22.5k5 gold badges62 silver badges59 bronze badges

2 Comments

ikuchris Over a year ago

thanks for the help. am getting this error [Vue warn]: Unknown custom element: <custom-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ittus Over a year ago

You need to register custom component vuejs.org/v2/guide/components-registration.html. But @Boussadjra Brahim solution is simpler.

Collectives™ on Stack Overflow

Pass parameters to @select of multiselect in Vue.js - vue-multiselect

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related