Передать параметры в @select of multiselect в Vue.js - vue-multiselect - PullRequest
Новая
       9

Передать параметры в @select of multiselect в Vue.js - vue-multiselect

0 голосов
/ 06 мая 2019

Я пытаюсь передать параметр в @ select функцию события в 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>

Мой вопрос: Как мне передать billItem в onSelect_selectedGood , чтобы я мог получить к нему доступ внутри функции.

что-то вроде @select="onSelect_selectedGood(billItem)" затем реализовать такую ​​функцию onSelect_selectedGood( billItem, option, id)

Дайте мне знать, как я могу этого достичь.

Ответы [ 2 ]

1 голос
/ 06 мая 2019

Вы можете сделать это просто так: 

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

и в ваших методах: 

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

   },
}

переданные параметры $event, которые selectedOption и billItem.

0 голосов
/ 07 мая 2019

Если вы хотите получить доступ ко всем billItem, option и id, вы можете создать пользовательский компонент ввода:

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>

изатем используйте его в своем html: 

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

Поскольку вы передали billItem в качестве реквизита, вы можете получить к нему доступ через this.billItem в пользовательском компоненте.

...