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

发布于 2025-01-31 10:25:04 字数 717 浏览 0 评论 0原文

使用 vue-multiselect 启用了具有多个选择的库，是否可以重新选择选定的项目/s？假设有两个选项产品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"
  }
]

a href =“ https://i.sstatic.net/cxjv8.png “ rel =“ nofollow noreferrer”> “在此处输入图像描述”

如何实现这种行为？

PS 我愿意使用其他VUE 3选择库，其中包含多个项目以及重复所选项目。

原文

Using Vue-Multiselect library with multiple selections enabled, is it possible to reselect the selected item/s? Let's say there are two options Product 1 and Product 2:

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

Then I will select Product 1 multiple times so the result would be:

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

It would be something like:

How to achieve this behavior?

PS
I'm open to using other Vue 3 select libraries with multiple items and duplication of selected items.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

じее 2025-02-07 10:25:04

AS @mamdasan 说，为了达到此要求，您可以收听@input事件，该事件在此后发出的事件V-Model值更改。要获取重复的选定选项，您可以在收听@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/[email protected]"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/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>

As @mamdasan said, To achieve this requirement you can listen to @input event which emitted after v-model value changes. To get the duplicate selected options you can maintain a separate array and empty the v-model variable while listening to @input event.

Note : I am facing one challenge while working on this requirement is to display the chips on selection as v-model value got empty.

Demo :

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/[email protected]"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/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>

回复收藏 0 原文

拿命拼未来 2025-02-07 10:25:04

首先聆听多选择V模型的更改，每次都会更改，将所选项目添加到数组中，然后清空多选择的V-Model对象。

然后在多选中添加此插槽：

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

基本上您创建一个数组

first listen for changes on your multiselect v-model, every time is changes, add the selected item to an array and empty the multiselect v-model object.

then add this slot in your multi-select:

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

basically you create an array, every time the user clicks on multiselect, you add to your array and empty the select value again, and then show the selected items to user

回复收藏 0 原文

温柔少女心 2025-02-07 10:25:04

`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
            },
         }`

`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
            },
         }`

回复收藏 0 原文

~没有更多了~