Vue-Multiselect多项选择能够重新选择选定的项目

ugmeyewa  于 2022-11-25  发布在  Vue.js
关注(0)|答案(3)|浏览(140)

使用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"
  }
]

它将类似于:

如何实现这种行为?
PS我愿意使用其他Vue 3选择库与多个项目和复制选定的项目。

0s0u357o

0s0u357o1#

正如@mamdasan所说,要达到这个要求,您可以监听@input事件,该事件在v-model值更改后发出。要获得重复的选定选项,您可以维护一个单独的数组,并在监听@input事件时清空v-model变量。
注**:我在处理此要求时面临的一个挑战是将选择的筹码显示为v-model值为空。
演示
:**
第一个

wpx232ag

wpx232ag2#

首先监听多选v-model上的更改,每次更改时,将所选项添加到数组中并清空多选v-model对象。
然后将此插槽添加到多选:

<template slot="selection" slot-scope="{ values, search, isOpen }">
     <span class="multiselect__single" v-if="theTalkedArray"> 
       {{ values.length }} options selected
     </span>
</template>

基本上你创建一个数组,每次用户点击多选,你添加到你的数组,并再次清空选择值,然后向用户显示选择的项目

xxb16uws

xxb16uws3#

`template

    <div class="form-group">
          <label class="mt-3">activities</label>
          <multiselect
            key="id"
            v-model="form.activities"
            :options="options"
            :class="{'is-invalid': submitted && $v.form.activities.$error}"
            :custom-label="Label"
            track-by="id"
            :multiple="true">
          </multiselect>
          <div v-if="submitted && !$v.form.activities.required" 
   class="invalid-feedback">
            required field
          </div>
        </div>

      script 

      options: [
              {
              id: 1,
      title: 'option 1'
    },
    {
      id: 2,
      title: 'option 2'
    },
    {
      id: 3,
      title: 'option 3'
    },
    {
      id: 4,
      title: 'option 4'
    },
  ],

      methode: {
          Label (option) {
             return option.title
            },
         }`

相关问题