同一个页面的两个多选字段损坏，vue多选

Question

我将此 vue.js solution 用于多选下拉菜单。我想在同一页上有两个多选字段。它们反映了不同的数据集。然而，第二个中的选择已损坏。

<div id="app">
  <multiselect 
    placeholder="Select"
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="language"
    label="language"
    >
  </multiselect>
  <pre>{{ value }}</pre>

  <multiselect 
    placeholder="Select"
    v-model="value2" 
    :options="options2"
    :multiple="true"
    track-by="language"
    label="language"
    >
  </multiselect>
  <pre>{{ value2 }}</pre>
</div>

Vue.js:

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    value: {language: 'aaa'},
    options: [
      { language: 'aaa'},
      { language: 'bbb'},
      { language: 'ccc'}
    ],
    options2: [
    {   language: '111'},
      { language: '222'},
      { language: '333'}
    ]
    },
  methods: {
    onSelect (items, lastSelectItem) {
      this.items = items
      this.lastSelectItem = lastSelectItem
    },
    // deselect option
    reset () {
      this.items = [] // reset
    },
    // select option from parent component
    selectOption () {
      this.items = _.unionWith(this.items, [this.options[0]], _.isEqual)
    },
  }
}).$mount('#app')

在这里试试：fiddle

如何使两个多选项彼此分开工作？

编辑：solution

Answer 1

您缺少 value2 数据字段。

添加 value2: {language: 'bbb'}, 它应该可以工作

同一个页面的两个多选字段损坏，vue多选

Two multiselect fields on the same page are corrupted, vue multiselect

javascript

multi-select

vue.js