vue.js - Vue-Multiselect Multiple Select 能够重新选择选中的项目

Question

使用 Vue-Multiselect启用了多项选择的库，是否可以重新选择所选项目？假设有两个选项产品 1 和产品 2:

options: [
    { name: 'Product 1', value: 'product_1' },
    { name: 'Product 2', value: 'product_2' }
]

然后我将多次选择产品 1，结果将是:

[
  {
    "name": "Product 1",
    "value": "product_1"
  },
  {
    "name": "Product 1",
    "value": "product_1"
  }
]

它会是这样的:

如何实现这种行为？

附言 我愿意将其他 Vue 3 选择库用于多个项目和所选项目的重复。

Answer 1

作为@mamdasan说，要实现此要求，您可以监听在 v-model 值更改后发出的 @input 事件。要获得重复的选定选项，您可以维护一个单独的数组并在监听 @input 事件时清空 v-model 变量。

注意 : 在处理此要求时，我面临一个挑战，即当 v-model 值变空时，在选择时显示筹码。

演示:

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      value: [],
      selectedItems: [],
      options: [
                 {
                   "city": "San Martin"
                 },
                 {
                   "city": "San Nicolas"
                 },
                 {
                   "city": "San Francisco"
                 }
               ]
    }
  },
  methods: {
    onSelect() {
  this.selectedItems.push(this.value[0]);
      this.value = [];
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div id="app">
<div>
  <multiselect
    v-model="value"
    placeholder="Select City"
    label="city"
    :options="options"
    :multiple="true"
    :close-on-select="false"
    @input="onSelect"
  >
  </multiselect>
</div>
<pre class="language-json"><code>{{ selectedItems }}</code></pre>
</div>