Vue-multiselect: Allow initial value to be only an identifier and not the full structure

Created on 2 Apr 2019  路  4Comments  路  Source: shentao/vue-multiselect

When setting the value using v-model you need to pass the full structure of the option, this is not ideal because you may not always know the full structure and in the vanilla select it does work like this (you can see it in the vue doc)

data: {
    value: 'rail', //This doesn't work
    value:  { value: 'rail', name: 'Rails', language: 'Ruby' }, //This does
    options: [
        { value: 'vue', name: 'Vue.js', language: 'JavaScript' },
        { value: 'rail', name: 'Rails', language: 'Ruby' },
        { value: 'sinatra', name: 'Sinatra', language: 'Ruby' },
        { value: 'laravel', text: 'Laravel', name: 'Laravel', language: 'PHP', $isDisabled: true }
      ]
    },
  computed: {
      value: {
          get: function () {
                return this.options.find(function(el) {
                    return el.value == 'rail' 
                }); //This does work
          }
     },
  },

Reproduction Link

In the following fiddle you can see the vanilla select, the computed value and the non computed values behavior
https://jsfiddle.net/xvecnhdm/1

It would be nice to be able to use value: 'rail' by default instead of having to use a computed value to find the right selected option

duplicate

Most helpful comment

@Tofandel yup, I鈥檝e seen this recently and thought about something similar for this library. Just need to consider all use cases. :)

All 4 comments

This question has already been asked. You will have to provide the whole value or at least a minimal structure that is enough to compare and display a label. This is due to the support for async multiselect, where the currently selected elements might not be available in the options list.
I鈥檓 currently thinking how to solve it in the 3.0 release.

This plugin offers this option in the reduce prop
You might want to take a look

@Tofandel yup, I鈥檝e seen this recently and thought about something similar for this library. Just need to consider all use cases. :)

any updates about this feature :-( ?

Was this page helpful?
0 / 5 - 0 ratings