vue js mutli vselect 不允许从下拉列表中重复选择

Question

美好的一天，我是 vue.js 的新手，我希望在我尝试 select 时禁用诸如 foo 之类的值，如果它已被 selected 禁用again.The 问题是当我 select 第二个比如 bar 我可以返回并且 select 第一个是 foo.enter image description here 这是我的代码。

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
  selected:"",
    options: [{
        id: 1,
        label: 'foo'
      },
      {
        id: 3,
        label: 'bar'
      },
      {
        id: 2,
        label: 'baz'
      },
    ],

  }
})

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}

<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@latest"></script>


<div id="app">
  <h1>Vue Select - Using v-model</h1>
  <v-select multiple v-model="selected" :options="options"></v-select>
</div>

Answer 1

这是默认行为，因为您将多个属性放在那里但 foo 选项不能 selected 两次。

如果您在 select 之后坚持删除 foo 选项，您可以通过观察模型 ('selected') 并检查它的值是否已更改，然后从选项中删除 foo .而且如果你删除 foo，那么你可以获取模型的先前值 ('selected')，比较它并将删除的值放入选项中。

https://vuejs.org/v2/guide/computed.html#Watchers

希望这对您有所帮助:)

Answer 2

I changed <script src="https://unpkg.com/vue-select@latest"></script> to<script src="https://unpkg.com/vue-select@2.4.0/dist/vue-select.js"></script>.It works.Run the code so you know what i am talking about...

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
  selected:"",
    options: [{
        id: 1,
        label: 'foo'
      },
      {
        id: 3,
        label: 'bar'
      },
      {
        id: 2,
        label: 'baz'
      },
    ],

  }
})

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}

<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@2.4.0/dist/vue-select.js"></script>


<div id="app">
  <h1>Vue Select - Using v-model</h1>
  <v-select multiple v-model="selected" :options="options"></v-select>
</div>

vue js mutli vselect 不允许从下拉列表中重复选择

vue js mutli vselect not allow for duplicate selection from dropdownlist

vue.js

vuejs2