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.
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
.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.