![](/img/trans.png)
[英]Is there a way to get the index of a selected v-select option in Vuetify?
[英]vuetify v-select with multiple options - getting selected/deselected option
我正在使用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
数组以返回从选择中添加或删除的新项目。
代替
:item-text="'name'" :item-value="'name'"
经过
item-text="name" item-value="name"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.