CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Ângelo Rigo
Ângelo Rigo

Reputation: 2157

Vuejs-Multiselect how to get just the selected option when enabling the multiple option

I am new to VueJS, and i am using Vuejs-Multiselect, enabling the multiple option.

I need to pass the selected value to the toggleSelected method .

In this pen, there is a simulation : https://codepen.io/amrigo/pen/arvadE

I see the values are concatenated, eg.: when i choose the first value i can see using console.log : [object Object], choosing the second [object Object],[object Object] and so on.

How can i get just the selected value and so the code value from the options array?

In the html i do use :

<div id="app">    
          <multiselect 
            v-model="value" 
            :options="options"
            :multiple="true"
            track-by="name"
            :hide-selected="true" 
            :close-on-select="false"
            :custom-label="customLabel"
            :searchable="false" 
            placeholder="" 
            :show-labels="false"
            @input="toggleSelected(value)"
            >           
          </multiselect>      
            <pre>{{ value }}</pre> 
        </div>

In the script i do use :

new Vue({
            components: {
                Multiselect: VueMultiselect.default
            },
            data: {
                value: [],
                options: [
                        { name: 'Agriculture', code: '1' },
                        { name: 'Police', code: '2' },
                        { name: 'Medical', code: '3' }                  
                ]
            },
          methods: {
            customLabel (option) {
              return `${option.name}`
            },
            toggleSelected(value) {
              alert( `${value.name}` )
              console.log(' >> '+ `${value}` )
            }
          }
        }).$mount('#app')

Upvotes: 2

Views: 8219

Answers (2)

Simon Angatia
Simon Angatia

Reputation: 860

From the documentation, to get the selected option you use the @select event. Example:

<multiselect 
    // ... all your props*
    @select="optionSelected">           
</multiselect>


// dont put the brackets (),
  //js will automatically pass the values to toggleSelected
//In your method:
optionSelected(option, id) {
console.log(option)
}

Upvotes: 2

ebbishop
ebbishop

Reputation: 1983

You can use a computed property for that. Do something like this:

  computed: {
    valueIds() {
      return this.value.map(v => v.id);
    }
  }

See this working example:

https://jsfiddle.net/ebbishop/7eku4vf0/

Upvotes: 1

Related Questions