newly created tags arent getting added to the selected array thus not showing

[shentao]

newly created tags arent getting added to the selected array thus not showing

[erikbelusic]

this is what i see in vue dev tools:

showPointer: true prop
options: Array[4] prop
0: Object
id: 1
name: "one"
1: Object
id: 2
name: "two"
2: Object
id: 3
name: "three"
3: Object
name: "asdasd"
id: 7714537
multiple: true prop
selected: Array[2] prop
0: Object
id: 1
name: "one"
1: Object
name: "asdasd"
id: 7714537
key: "id" prop
label: "name" prop
searchable: true prop
clearOnSelect: true prop
hideSelected: false prop
placeholder: "Start typing..." prop
maxHeight: 300 prop
allowEmpty: true prop
onChange: false prop
onSearchChange: false prop
touched: true prop
resetAfter: false prop
closeOnSelect: true prop
customLabel: false prop
taggable: true prop
onTag: Function prop
tagPlaceholder: "Press enter to create a tag" prop
limitText: Function prop
limit: 99999 prop
showLabels: true prop
deselectLabel: "Press enter to remove" prop
selectedLabel: "Selected" prop
selectLabel: "Press enter to select" prop
pointer: 2
search: ""
isOpen: false
value: Array[1]
0: Object
id: 1
name: "one"
loading: false
optionKeys: Array[4] computed
0: "one"
1: "two"
2: "three"
3: "asdasd"
valueKeys: Array[1] computed
0: 1
filteredOptions: Array[4] computed
0: Object
1: Object
2: Object
3: Object
visibleValue: Array[1] computed
0: Object
id: 1
name: "one"

selected and value are not in sync.

[shentao]

My bad, I should have added it the example. Here is the code for the onChange callback.
https://github.com/monterail/vue-multiselect/blob/master/docs/App.vue#L769

This is a bit tricky and only required if tags are objects, but it should make it work.

I will have to refactor the way syncing of object tags works to make it a bit easier.

Let me know if that solves the problem!
Cheers

[erikbelusic]

I can't test this until later, but from the looks of it, it will not solve the problem since the callback is on the create-like-form component, it will not have access to the this.values on the multiselect component if my understanding of vue is correct.

*a possible solution: *

make your component listen for some sort of event for when a new tag is added, and then the parent component can use $broadcast ? - then my add tag method could look something like this:

addTag (newTag) {
            const tag = {
                name: newTag,
                id: Math.floor((Math.random() * 10000000))
            }
            this.form.tags.push(tag)
            this.taggable.options.push(tag)
            this.$broadcast('tag-created', tag)
        },

EDIT - realized with the broadcast idea, that my method could be simplified to

addTag (newTag) {
            this.$broadcast('tag-created', {
                name: newTag,
                id: Math.floor((Math.random() * 10000000))
            })
        },

and your event handler could handle pushing into selected and options ? - id be open to doing the PR but my experience with js package development is ZERO and same for unit testing (i saw you have a good number of test covering this project =] )

[shentao]

Thanks for your suggestion.
Sadly I don’t want to introduce $broadcast or $emit as this will be deprecated in Vue 2.0.
Of course, I could use $on inside the component but this would later force developers to create some event bus just for the sake of using this.

Please test it, as I believe this should actually work. It works in tests and in the docs (the second example). Sadly right now, you need an on-change callback function. Please try doing it like in the link above.

Cheers!

[erikbelusic]

ok, i will follow up later

thanks!

[shentao]

Any progress?
I will probably try to refactor this next week to make it easier.

[erikbelusic]

nope. as i expected =/ - i may have to try using the mixins or something because the parent component (create-link-form) cant access properties on the child component. to try and debug i put a console log in the updateSelectedTagging function and it doesnt get fired when i add a tag that wasnt in the options list

[erikbelusic]

i got a hack solution by putting this in my addTag method

this.$children[0].$data.value.push(tag);

but that is super hacky - i guess my question now would be the value array and the selected array? they seem like they should be the same? idk a quick fix could be to have value as a prop that we can two way bind to also? because the hack i did only works if i am sure that there is only the one child component

[shentao]

The value is a working copy of selected prop. This is due to Vuex support, where you’re not supposed to mutate the state outside of Vuex. And yes, they are supposed to be the same and there is code responsible for it. Syncing value and selected in both ways (so that you can actually change the component value from outside of the component.

Can you remove the .sync from selected.sync="" prop? This is important to not have if you use the on-change callback.

Please follow the whole example of tagging with an array of objects.
https://github.com/monterail/vue-multiselect/blob/master/docs/App.vue#L298
I’m still certain that it should work! But now I know that the example requires too much configuration and I really need to refactor it :(

[erikbelusic]

removing the .sync worked!! was able to remove my hacky code! thanks!!

great job by the way. besides the issues getting my exact implementation to work, this is the best tagging solution for vue that i have found!

[shentao]

I’m glad I could help!
Thanks for your kind words! :)