vuetify v-select with multiple options - getting selected/deselected option
I'm using Vuetify
and its v-select
component with multiple
option enabled to allow selecting multiple options.
These options represent talent(candidate) pools for my CRM software.
What it needs to do is that when some option in v-select is checked, candidates from checked talent pool are fetched from API and saved to some array (let's call it markedCandidates
), and when option is deselected, candidates from that pool need to be removed from markedCandidates
array.
The problem is that @change
or @input
events return complete list of selected options. I need it to return just selected/deselected pool and information if it's selected or deselected, to be able to update the markedCandidates
array.
My existing code:
<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>
Any idea how to solve this?
As I said, loadCandidatesFromTalentPool(change)
returns complete array of v-model
(markedCandidates
)..
EDIT:
I found this solution, it's more of a workaround actually, would be nice if there was dedicated event for this situation:
https://codepen.io/johnjleider/pen/OByoOq?editors=1011
javascript vuejs2 vue-component vuetify.js v-select
add a comment |
I'm using Vuetify
and its v-select
component with multiple
option enabled to allow selecting multiple options.
These options represent talent(candidate) pools for my CRM software.
What it needs to do is that when some option in v-select is checked, candidates from checked talent pool are fetched from API and saved to some array (let's call it markedCandidates
), and when option is deselected, candidates from that pool need to be removed from markedCandidates
array.
The problem is that @change
or @input
events return complete list of selected options. I need it to return just selected/deselected pool and information if it's selected or deselected, to be able to update the markedCandidates
array.
My existing code:
<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>
Any idea how to solve this?
As I said, loadCandidatesFromTalentPool(change)
returns complete array of v-model
(markedCandidates
)..
EDIT:
I found this solution, it's more of a workaround actually, would be nice if there was dedicated event for this situation:
https://codepen.io/johnjleider/pen/OByoOq?editors=1011
javascript vuejs2 vue-component vuetify.js v-select
add a comment |
I'm using Vuetify
and its v-select
component with multiple
option enabled to allow selecting multiple options.
These options represent talent(candidate) pools for my CRM software.
What it needs to do is that when some option in v-select is checked, candidates from checked talent pool are fetched from API and saved to some array (let's call it markedCandidates
), and when option is deselected, candidates from that pool need to be removed from markedCandidates
array.
The problem is that @change
or @input
events return complete list of selected options. I need it to return just selected/deselected pool and information if it's selected or deselected, to be able to update the markedCandidates
array.
My existing code:
<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>
Any idea how to solve this?
As I said, loadCandidatesFromTalentPool(change)
returns complete array of v-model
(markedCandidates
)..
EDIT:
I found this solution, it's more of a workaround actually, would be nice if there was dedicated event for this situation:
https://codepen.io/johnjleider/pen/OByoOq?editors=1011
javascript vuejs2 vue-component vuetify.js v-select
I'm using Vuetify
and its v-select
component with multiple
option enabled to allow selecting multiple options.
These options represent talent(candidate) pools for my CRM software.
What it needs to do is that when some option in v-select is checked, candidates from checked talent pool are fetched from API and saved to some array (let's call it markedCandidates
), and when option is deselected, candidates from that pool need to be removed from markedCandidates
array.
The problem is that @change
or @input
events return complete list of selected options. I need it to return just selected/deselected pool and information if it's selected or deselected, to be able to update the markedCandidates
array.
My existing code:
<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>
Any idea how to solve this?
As I said, loadCandidatesFromTalentPool(change)
returns complete array of v-model
(markedCandidates
)..
EDIT:
I found this solution, it's more of a workaround actually, would be nice if there was dedicated event for this situation:
https://codepen.io/johnjleider/pen/OByoOq?editors=1011
javascript vuejs2 vue-component vuetify.js v-select
javascript vuejs2 vue-component vuetify.js v-select
edited Nov 13 '18 at 20:50
David Thomas
202k35296347
202k35296347
asked Nov 13 '18 at 19:22
kecmankecman
170113
170113
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Actually there is only one event related to changing values of v-autocomplete
: @change
(See https://vuetifyjs.com/en/components/autocompletes#events). The watch
approach is useful if you want to monitor only individual changes. However, if you plan to do this with more selectors, it could be better if you create a custom reusable component with a new attached event (in this example, for the last change).
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>',
)
Then you can use your component as simple as:
<customselector @lastchange="lastChange" >...</customselector>
methods:
lastChange: function(changed, inserted, deleted)
this.lastChanged = changed
The changed
only shows items which are actually changed. I've added the inserted
and deleted
arrays to return new items added or removed from the selection.
Source example: https://codepen.io/fraigo/pen/qQRvve/?editors=1011
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288143%2fvuetify-v-select-with-multiple-options-getting-selected-deselected-option%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Actually there is only one event related to changing values of v-autocomplete
: @change
(See https://vuetifyjs.com/en/components/autocompletes#events). The watch
approach is useful if you want to monitor only individual changes. However, if you plan to do this with more selectors, it could be better if you create a custom reusable component with a new attached event (in this example, for the last change).
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>',
)
Then you can use your component as simple as:
<customselector @lastchange="lastChange" >...</customselector>
methods:
lastChange: function(changed, inserted, deleted)
this.lastChanged = changed
The changed
only shows items which are actually changed. I've added the inserted
and deleted
arrays to return new items added or removed from the selection.
Source example: https://codepen.io/fraigo/pen/qQRvve/?editors=1011
add a comment |
Actually there is only one event related to changing values of v-autocomplete
: @change
(See https://vuetifyjs.com/en/components/autocompletes#events). The watch
approach is useful if you want to monitor only individual changes. However, if you plan to do this with more selectors, it could be better if you create a custom reusable component with a new attached event (in this example, for the last change).
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>',
)
Then you can use your component as simple as:
<customselector @lastchange="lastChange" >...</customselector>
methods:
lastChange: function(changed, inserted, deleted)
this.lastChanged = changed
The changed
only shows items which are actually changed. I've added the inserted
and deleted
arrays to return new items added or removed from the selection.
Source example: https://codepen.io/fraigo/pen/qQRvve/?editors=1011
add a comment |
Actually there is only one event related to changing values of v-autocomplete
: @change
(See https://vuetifyjs.com/en/components/autocompletes#events). The watch
approach is useful if you want to monitor only individual changes. However, if you plan to do this with more selectors, it could be better if you create a custom reusable component with a new attached event (in this example, for the last change).
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>',
)
Then you can use your component as simple as:
<customselector @lastchange="lastChange" >...</customselector>
methods:
lastChange: function(changed, inserted, deleted)
this.lastChanged = changed
The changed
only shows items which are actually changed. I've added the inserted
and deleted
arrays to return new items added or removed from the selection.
Source example: https://codepen.io/fraigo/pen/qQRvve/?editors=1011
Actually there is only one event related to changing values of v-autocomplete
: @change
(See https://vuetifyjs.com/en/components/autocompletes#events). The watch
approach is useful if you want to monitor only individual changes. However, if you plan to do this with more selectors, it could be better if you create a custom reusable component with a new attached event (in this example, for the last change).
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>',
)
Then you can use your component as simple as:
<customselector @lastchange="lastChange" >...</customselector>
methods:
lastChange: function(changed, inserted, deleted)
this.lastChanged = changed
The changed
only shows items which are actually changed. I've added the inserted
and deleted
arrays to return new items added or removed from the selection.
Source example: https://codepen.io/fraigo/pen/qQRvve/?editors=1011
edited Nov 13 '18 at 21:58
answered Nov 13 '18 at 21:43
F.IgorF.Igor
2,0371717
2,0371717
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288143%2fvuetify-v-select-with-multiple-options-getting-selected-deselected-option%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown