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

Answer 1

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

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

请参见以下工作示例：

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

Vuejs-Multiselect启用多重选项时如何仅获取所选选项

1 个答案: