Vue.js 多选填充另一个多选

Question

是否可以有两个多选字段，第二个选择选项将根据第一个选择中选择的内容填充？

解释：

每个类别都有许多与之相关的描述。

主选择菜单称为“类别”，选项是静态的，不会改变。 第二个选择菜单称为“描述”。

我可以选择任意数量的类别。如果我选择一个类别，第二个选择菜单将包含与该类别相关的所有描述作为选项。当我在类别选择字段中选择另一个类别时，与该类别相关的描述将添加到第二个选择菜单中，依此类推。取消选择也是如此。我希望它是被动的。

我找到了这些：

https://github.com/sagalbot/vue-select https://github.com/monterail/vue-multiselect

但是我还没有找到一个解决方案来通过两个多选来做到这一点。有什么指点吗？

PS。没有太多的类别和描述，所以我可以将它们全部加载到视图中，以便 vue 可以使用它们。我不需要 ajax 调用。

Answer 1

您需要动态填充第二个选择并根据来自第一个选择的事件更新其数据源。

这是一个小草图，希望对你有帮助。

<template>
  <div class="root">
    <!-- initial select (options hardcoded) -->
    <select v-on:change="populate($event)" multiple="multiple">
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
    <select>
      <!-- options variable is reactive -->
      <option v-for="option in options" :value="option.value">{{option.text}}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'Selects',
  data () {
    return {
      options: []
    }
  },
  methods: {
    populate (event) {
      const options = []
      // iterate over the selected options
      // event.target.selectedOptions is a HTMLCollection 

      Array.from(event.target.selectedOptions).forEach(item => {
        // or whatever logic you need
        options.push({
          value: item.value,
          text: `You have selected ${item.text}`
        })
      })

      // update the options attribute to trigger re-rendering
      this.options = options
    }
  }
}
</script>

稍后编辑

jsfiddle here -> https://jsfiddle.net/bpgp11da/