vuetify v-select с несколькими опциями - получение выбранной / отмененной опции - PullRequest
Новая
       29

vuetify v-select с несколькими опциями - получение выбранной / отмененной опции

0 голосов
/ 13 ноября 2018

Я использую Vuetify и его компонент v-select с включенной опцией multiple, позволяющей выбрать несколько опций.

Эти параметры представляют пулы талантов (кандидатов) для моего программного обеспечения CRM.

Что нужно сделать, так это то, что когда проверяется какая-то опция в v-select, кандидаты из проверенного пула талантов выбираются из API и сохраняются в некотором массиве (назовем это markedCandidates), а когда опция не выбрана, кандидаты из этого пула нужно удалить из массива markedCandidates.

Проблема в том, что события @change или @input возвращают полный список выбранных параметров. Мне нужно, чтобы он возвращал только выбранный / не выбранный пул и информацию, если он выбран или отменен, для возможности обновления массива markedCandidates.

Мой существующий код: 

<v-select return-object multiple @change="loadCandidatesFromTalentPool" v-model="markedCandidates" :item-text="'name'" :item-value="'name'" :items="talentPoolsSortedByName" dense placeholder="No pool selected" label="Talent Pools" color='#009FFF'>
  <template slot="selection" slot-scope="{ item, index }">
    <span v-if="index === 0">{{ item.name }}</span>
    <span v-if="index === 1" class="grey--text caption othersSpan">(+{{ talentPools.length - 1 }} others)</span>
  </template>
</v-select>

Есть идеи, как это решить?

Как я уже сказал, loadCandidatesFromTalentPool(change) возвращает полный массив v-model (markedCandidates) ..

EDIT: Я нашел это решение, это скорее обходной путь, было бы неплохо, если бы для этой ситуации было выделено событие:

https://codepen.io/johnjleider/pen/OByoOq?editors=1011

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Заменить 

:item-text="'name'" :item-value="'name'"

по

item-text="name" item-value="name"

0 голосов
/ 14 ноября 2018

На самом деле существует только одно событие, связанное с изменением значений v-autocomplete: @change (см. https://vuetifyjs.com/en/components/autocompletes#events).. Подход watch полезен, если вы хотите отслеживать только отдельные изменения. Однако, если вы планируетечтобы сделать это с большим количеством селекторов, было бы лучше, если бы вы создали пользовательский компонент многократного использования с новым прикрепленным событием (в данном примере для последнего изменения ). 

Vue.component('customselector',{
  props:[
    "value",
    "items"
  ],
  data: function() {
    return {
      content: this.value,
      oldVal : this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    },
    changed (val) {
      oldVal=this.oldVal
      //detect differences
      const diff = [
        ...val.filter(x => !oldVal.includes(x)),
        ...oldVal.filter(x => !val.includes(x))
      ]
      this.oldVal = val
      var deleted=[]
      var inserted=[]
      // detect inserted/deleted
      for(var i=0;i<diff.length;i++){
        if (val.indexOf(diff[i])){
          deleted.push(diff[i])
        }else{
          inserted.push(diff[i])
        }
      }
      this.$emit("change",val)
      this.$emit("lastchange",diff,inserted,deleted);
    }
  },
  extends: 'v-autocomplete',
  template: '<v-autocomplete @input="handleInput" @change="changed" :items="items" box chips color="blue lighten-2" label="Select" item-text="name" item-value="name" multiple return-object><slot></slot></v-autocomplete>',

})

Тогда вы можете использовать свой компонент так же просто, как:

<customselector @lastchange="lastChange" >...</customselector>

methods:{
    lastChange: function(changed, inserted, deleted){
      this.lastChanged = changed
    }
}

changed показывает только те элементы, которые фактически изменены. Я добавилinserted и deleted массивы для возврата новых элементов, добавленных или удаленных из выбора.

Пример источника: https://codepen.io/fraigo/pen/qQRvve/?editors=1011

...