如何从 vue 中的多选框中获取多个选项？

Question

我有很多选择框，它们有很多选项并且是动态的。

<template>
  <div>
    <tr v-for="category in categories.items" :key="category.id">
      <td>
        <select v-model.trim="$v.form.attributeValues.$model" class="form-control">
          <option value=""></option>
          <option v-for="option in category.values" :key="option.id" :value="option">
            {{ option.content }}
          </option>
        </select>
      </td>
    </tr>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: null,
      form: {
        productId: this.product.productId,
        attributeValues: [],
      },
    }
  },
}
</script>

我想获取主题的值并将其保存在一个数组中。
但它不起作用，我只能保存 1 个选项。

像这样： （从每个选择框中只获得一个选项）

Answer 1

多选远非微不足道的组件。

大多数人只是使用vue-multiselect 或任何package alike。
还有一吨可用。您应该寻找与您想要的功能相匹配的那个。

如果您想手动实现它，您将需要处理绑定正确的输入、事件和结构，因为它无法通过简单的v-model 来实现。
这方面最好的文章之一是this one。

不过，这完全取决于您希望它的外观、各种选项的行为、选择它的方式（键盘、ctrl + 单击、简单单击等...）、过渡等...

TLDR：使用一个包或自己尝试一下，如果您想进行一些调试，请向我们展示您目前取得的成果。
社区不会为您从头开始编写复杂的组件。

Answer 2

只需将v-model 和input-event 添加到您的选项中，如下所示：

模板

<option v-model="selectedItem" @input="checkItem(selectedItem)">
  <!-- Your code -->
</option>

然后转到您的脚本并定义所有内容。之后，您可以创建一个名为 checkItem 的方法，然后您将在 push 定义您选择的 array 中的所有内容。

脚本

data() {
  return {
    selectedItem: null,
    allItems: [],
  }
},

methods: {
  checkItem(selectedItem) {
    this.allItems.push(selectedItem)
  }
}

希望这对您有所帮助 - 请告诉我！