我正在使用 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
)..
编辑: 我找到了这个解决方案,实际上它更像是一种解决方法,如果针对这种情况有专门的事件,那就太好了:
最佳答案
实际上只有一个事件与 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
数组返回从选择中添加或删除的新项目。
关于javascript - vuetify v-select 具有多个选项 - 获取选择/取消选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53288143/