New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v-model with reduce if value changed outside v-select #855
Comments
Thanks for reporting and providing a repro link. I'll get a patch out for this one. |
Forked: https://codepen.io/anon/pen/zXMNRj#anon-login Notes:
|
Duplicate #842 |
Do you have a workaround for this issue whilst you are working on a patch? |
I have tried to update in code and working
That's all! Hope @sagalbot help to update it. |
I've try to do that but with no success. |
Any update on this? This is kind of a blocker right now. The proposal by huypn didn't solve it for me, made it worse by triggering watchers again. |
the best workaround I've found for this issue is to not use the import { keyBy } from 'lodash'
export default {
data: () => ({
selectedTagIds: []
}),
computed: {
selectedTags: {
get() {
// optimize with lodash.keyBy to only loop through data once
const tagsById = keyBy(this.tags, '_id')
return this.selectedTagIds.map(id => tagsById[id])
},
set(tags) {
this.selectedTagIds = tags.map(tag => tag._id)
}
}
}
} |
Here's a nice little utility version: // compute-objects-to-ids.js
import { keyBy, get, set } from 'lodash'
export default function computeObjectsToIds({ source, dest, key }) {
return {
get() {
const byId = keyBy(get(this, source), i => get(i, key))
const destProp = get(this, dest)
if (Array.isArray(destProp)) {
return destProp.map(i => byId[i])
} else {
return []
}
},
set(items) {
set(this, dest, items.map(i => get(i, key)))
}
}
} And you use it like this: import computeObjectsToIds from './compute-objects-to-ids'
export default {
data: () => ({
selectedTagIds: []
}),
computed: {
selectedTags: computeObjectsToIds({
source: 'tags',
dest: 'selectedTagIds',
key: '_id'
}),
}
} Once you've got it setup, only pass the array of objects to the Note that it's using lodash.get and lodash.set, internally, so you can set all of the values to any nested prop available on |
I'm eager to see this patched as well! This is an unfortunate bug on an otherwise extremely useful feature. |
I think one quick fix is for me is, I have created options in beforeMount callback instead in mounted callback |
@rajilesh I am populating my select in created() hook (which should come before beforeMount()) and it doesn't work anyway. |
I don't know why this problem has not been resolved so far, but we can solve it simply by setting a <v-select
v-model="selected"
:options="options"
:key="selected"
:reduce="op => op.id"
/> new Vue({
el: '#app',
data: {
selected: 3,
options: [
{ id: 1, label: 'op-1' },
{ id: 2, label: 'op-2' },
{ id: 3, label: 'op-3' },
{ id: 4, label: 'op-4' },
{ id: 5, label: 'op-5' }
]
}
}) |
@talkhabi Thank you, it works like a charm! |
The However, it seems to have some unintended side-effects on |
To add to what @LRWeber writes: With |
@borekl Good catch! I've now managed to resolve that error using |
3 months now... :-( |
@geri777 You probably didn't see this announcement yet. |
Thanks @doits for the great PR! Getting a couple other PRs merged and will tag a release. |
declare below under data : {} `declare below in data companies: [ |
its also repeated with i18n : if set lang - vue-select didn't update lang (val) |
Describe the bug
When using v-model with reduce and changing v-model value in vue component v-select value is not updated. Input event not emitted.
To Reproduce
Pick any value from dropdown
Press reset button
https://codepen.io/anon/pen/PgyLXz
Expected behavior
V-select value is changed with associated v-model variable.
input event emitted
The text was updated successfully, but these errors were encountered: