Vue-multiselect: Single select issue

[sohelamin]

Hey,

I want to use the component as singleselect
Suppose, I've an array of options where I want to select by given a key of object eg: my key is event = 'event1'
and the code is like

{{ event }}

<multiselect :selected.sync="event" :options="[{key: 'event1', label: 'Event 1'}, {key: 'event2', label: 'Event 2'}]"></multiselect>

Is that possible or do I need to compute the changes every time?

[shentao]

Hey! Sorry for the late reply.
The .sync modifier is deprecated since v1.0.
Your code should look like this:

<multiselect :selected="event" :options="options" key="key" label="label" @update="updateEvent"></multiselect>

data () {
  return {
    event: {},
    options: [{key: 'event1', label: 'Event 1'}, {key: 'event2', label: 'Event 2'}]
  }
},
methods: {
  updateEvent (newEvent) {
    this.event = newEvent
  }
}

This is exactly as the docs example.

[sohelamin]

Thanks for the reply @shentao

Actually I was looking if I can set the selected property as key and also return as key instead of the entire object.
No problem :)

I've made a wrapper component for this.

export default {
    template: require('./template.html'),
    props: ['selected', 'options', 'placeholder'],
    data() {
        return {
            default: ''
        }
    },
    methods: {
        updateSelected (value) {
            this.selected = (value && value.key) ? value.key : value;

            this.$emit('update', this.selected)
        }
    },
    computed: {
        default() {
            var tmp = '';
            if (this.selected && this.options) {
                if (typeof this.options[0] === 'object') {
                    var selected = this.selected;
                    this.options.forEach(function(option) {
                        if (option.key == selected) {
                            tmp = option;
                        }
                    });
                } else {
                    if (this.options.indexOf(this.selected) !== -1) {
                        tmp = this.selected;
                    }
                }
            }

            return tmp;
        }
    }
}

[shentao]

Sorry, I must have misunderstood you. Yes, if you just want to work with the keys, you need to derive it from the selected object and the other way around when setting it.

[sohelamin]

Its okay 👍
Now I've no issue with that wrapper.

BTW, You did really a great component.

[shentao]

Thanks! I guess, I can implement such functionality (preselecting based on just the key) into the 2.0 release.

[sohelamin]

That will be great. But if you can please do it on 1.0 version too cause there are many legacy apps based on Vue 1.x.x

Or if you want then I can help you.

[shentao]

We’ll see. The priority for this is lower than publishing 2.0 beta though.