javascript - Vuejs-Multiselect在启用多个选项时如何仅获取选定的选项

Question

我是 VueJS 的新手，我正在使用Vuejs-Multiselect，启用多个选项。

我需要将选定的值传递给toggleSelected方法。

在这支笔中，有一个模拟：https ://codepen.io/amrigo/pen/arvadE

我看到这些值是串联的，例如：当我选择第一个值时，我可以使用 console.log 看到：[object Object]，选择第二个 [object Object]，[object Object] 等等。

我如何才能从选项数组中获取选定的值以及代码值？

在我使用的 html 中：

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

在我使用的脚本中：

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

标签： javascriptvue.jsnuxt.js

Answer 1

您可以为此使用计算属性。做这样的事情：

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

请参阅此工作示例：

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