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

admin管理员组

文章数量:1427333

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 :

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({
            ponents: {
                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')

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({
            ponents: {
                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')

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow edited May 8, 2019 at 20:01 Ângelo Rigo asked May 8, 2019 at 19:43 Ângelo RigoÂngelo Rigo 2,1671010 gold badges4040 silver badges7373 bronze badges 5

• 1 do not change value because it will pare options to determin show / hide options in view. make a puted is more better. – 王仁宏 Commented May 8, 2019 at 19:58
• 1 codepen.io/anon/pen/PvPxoQ – 王仁宏 Commented May 8, 2019 at 20:01
• Thank you @王仁宏 your solution is very clear, did not know i could access the value in this way using the javascript map – Ângelo Rigo Commented May 8, 2019 at 20:11
• How can i reset the array so i can have just one value at every time i select one option from the select box ? – Ângelo Rigo Commented May 8, 2019 at 20:45
• 1 if you mean what value changed, vue-multiselect.js/#sub-events add @select attr and give a function to access selectedOption – 王仁宏 Commented May 8, 2019 at 20:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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)
}

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

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

See this working example:

https://jsfiddle/ebbishop/7eku4vf0/

本文标签：