标签: vue-multiselect

我想在由vue-multiselect.
如果我有一个像下面这样的简单字符串数组，我可以让它正常工作：

['Test 1', 'Test 2', 'Test 3']

但是，当我使用一组对象时，我无法让它工作。例如，如果我有以下内容：

<v-multiselect :options="[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]"
               label="name"
               track-by="id"
               v-model="test">
</v-multiselect>

无论我设置了testv-model 连接到的数据属性，它都不会预选该值。我试过1, 2, 3, '1', '2'and '3'for testwhen track-byis idand'Test 1'等 when track-byisname但似乎没有任何效果。

我在这里做错了什么？我查看了https://vue-multiselect.js.org/#sub-single-select-object上的文档，但是当您想为一组对象预设一个值时，它们似乎没有提供示例选项。谷歌搜索也没有返回我正在寻找的东西。

在相关主题上，一旦我开始工作，当我将组件设置为时，我需要更改什么才能选择多个值multiple？谢谢你。

我有一个 vue 组件，目前正在成功显示数据对象的结果，并且我还成功创建了几个多选框。我的问题是过滤。

我知道如何从多选中设置单个值并进行比较（使用 v-if），以便在 HTML div 中显示某些结果，但我现在完全不知道如何基于多个多选进行正确的过滤（特别是因为其中几个允许将值存储在数组中的多个选项）

我将我的代码片段放在下面，但是如何正确制作它，以便我可以根据多选的相应 v 模型中的所有值来过滤结果，同时确保“所有商店”或“所有区域”是否为选择后，它允许该选择的所有值吗？

-- 换句话说，如果用户没有进行选择并且多选保留在占位符上，则该选择的所有值都将被允许在 DOM 中显示（首先基于其他过滤器）

new Vue({
  el: "#app",
  components: {Multiselect: window.VueMultiselect.default},
  data: {
    selectedOutput: '',
    selectedAreas:[],
    selectedStores: [],
    selectedCategories: [],
    selectedShifts: [],
    shifts: [
      {id: 1, name: "First"},
      {id: 2, name: "Second"}
    ],
    categories: [
      {id: 1, name: "electronics"},
      {id: 1, name: "home"},
      {id: 1, name: "auto"},
    ],
    outputOptions: [
      {id:1, name: "Sold"},
      {id:2, name: "Purchased"}
    ],
    areas: [
        {value: 1, name: "East"},
        {value: 1, name: "West"},
    ],
    stores: …

我正在Vue-Multiple Select为多选选项使用包。

https://vue-multiselect.js.org/#sub-getting-started

按照他们的指示后，我收到一个错误。

对我来说非常未知的错误。我错过了什么？！

我想截断 vue-multiselect 上的许多值。

我尝试用这个来覆盖许多类，但它不起作用，就像这个例子：

.multiselect__content-wrapper {
    overflow-x: hidden;
    text-overflow: ellipsis;
}

在vuejs中，有没有一种方法可以为多个广告位设置相同的内容而无需复制粘贴？

所以这：

<base-layout>
  <template slot="option">
    <span :class="'flag-icon-'   props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>

  <template slot="singleLabel">
    <span :class="'flag-icon-'   props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>
</base-layout>

可以这样写：

<base-layout>
  <template slot="['option', 'singleLabel']">
    <span :class="'flag-icon-'   props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>
</base-layout>

非常感谢。

多选组件的数据属性不会在更改时更新。复选框不会在前端更新。

预期行为：单击复选框时应勾选。

代码链接：https : //jsfiddle.net/bzqd19nt/3/

<div id="app">
  <multiselect 
    select-Label=""
    selected-Label=""
    deselect-Label=""
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    :close-on-select="false"
    @select=onSelect($event)
    @remove=onRemove($event)
    >
    <span class="checkbox-label" slot="option" slot-scope="scope" @click.self="select(scope.option)">
    {{ scope.option.library }}
      <input class="test" type="checkbox" v-model="scope.option.checked" @focus.prevent/>

    </span>
  </multiselect>
  <pre>{{ value }}</pre>
</div>

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: [],
    options: [
      { language: 'JavaScript', library: 'Vue.js', checked: false },
      { language: 'JavaScript', library: 'Vue-Multiselect', checked: false },
      { language: 'JavaScript', library: 'Vuelidate', checked: false }
    ]
  },
  methods: …

使用启用了多项选择的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 选择库。

我想参数传递到@select事件功能Vue.js

HTML

 <template>
    <div class="container">

<div v-for="(billItem, k) in billItems" :key="k" >
    <div class="form-group row">
        <label class="col-form-label col-sm-3" for=""> Products</label>
        <div class="col-sm-3">
        <div class="form-group">
            <label for="">Product</label>
            <multiselect 
                v-model="billItem.billItem_selectedGood" 
                :options="productOptions" 
                :close-on-select="true" 
                :clear-on-select="false" 
                :hide-selected="true" 
                :preserve-search="true" 
                placeholder="Select Product" 
                label="name" 
                track-by="name" 
                :preselect-first="false"
                id="example"
                @select="onSelect_selectedGood"
            >
            </multiselect>
        </div>
    </div>
</div>

</div>
</template>

JS

<script>

export default {
  data(){
    return {
      form: new Form({
      })
    }
  },
  methods : {
    onSelect_selectedGood( option, id) {
      console.log("onSelect_selectedGood");
      console.log(option);
    }
  },
  mounted() {
      
  }
}
</script> …

我在 Vue 组件中使用https://vue-multiselect.js.org 。我正在使用 AJAX 更新选择列表选项，我在检查器中看到有 10 个值。

但是当我实际单击进入多选列表时，我只看到这些项目的子集，而且我不明白为什么......以下是我的多选道具/事件：

<multiselect
        v-model="organization"
        :allow-empty="true"
        :loading="loading"
        :options="organizationSearch"
        :preserve-search="true"
        @search-change="searchOrganizations"
        @select="organizationSelected"
        @remove="organizationDeselected"
        placeholder="Search Organizations"
        label="name"
        track-by="id"
        class="multiselect my-3"
>

</multiselect>

我正在使用 vue-multiselect 并复制了示例vue-multiselect 多重选择

<div>
  <label class="typo__label">Simple select / dropdown</label>
  <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
    <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

在示例中可以看到标签不存在，这种情况发生在所有示例中，默认情况下标签不存在于任何示例中。

但是当使用示例代码时，标记确实显示，

• 我尝试使用:taggable="false"，
• 我尝试使用<template #tag></template>
• 我也检查了，它不是 CSS 隐藏的，标签仍然显示。 这是重现该问题的最少代码。

所需的行为是不显示标记，就像示例中一样。

我是 VueJs 的新手，我正在使用 vue-multiselect 并且需要获取已删除的项目信息。

例如：选择一个或多个 itens 并删除其中一个后，通过单击标签，我如何使用@remove 事件并获取我需要的所有信息，如值和 ID？

假设我有一个这样的数组： ['food', 'farmacy']

如果从 vuejs-multiselect 中删除这些值，我如何访问它们？

我写的 ：

   <multiselect v-model="value" 
                track-by="code" 
                :options="options" 
                :multiple="true" 
                :taggable="true" 
                placeholder="Choose one category" 
                label="name"
                @remove="toggleUnSelectMarket(value, id)"></multiselect>

我只是将 value 和 id 作为参数传递给toggleUnSelectLojas函数，但不知道如何找到我需要的信息：

toggleUnSelectLojas: function(value, id)
  {          

     console.log(' Teste toggleUnSelectMarkets value : ', value)
     console.log(' Teste toggleUnSelectMarkets id : ', id)
  },