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

1 个答案: