[英]Pass parameters to @select of multiselect in Vue.js - vue-multiselect
我想参数传递到在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)
让我知道如何实现它。
你可以简单地这样做:
@select="onSelect_selectedGood($event,billItem)"
并在您的方法中:
methods : {
onSelect_selectedGood( selectedOption,billItem) {
console.log( selectedOption,billItem);
},
}
传递的参数是$event
,它是selectedOption
和billItem
。
如果要访问所有billItem, option
和id
,可以创建自定义输入组件:
自定义输入.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>
然后在你的 html 中使用它:
<custom-input
:billItem="billItem"
/>
因为您将billItem
作为 prop 传递,所以您可以通过自定义组件中的this.billItem
访问它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.