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

Question

美好的一天，我是 vue.js 的新手，我希望在尝试再次选择它时选择禁用诸如 foo 之类的值。问题是当我选择第二个(例如bar(时，我可以返回并选择第一个foo.在此处输入图像描述 这是我的代码。

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

我改变了<script src="https://unpkg.com/vue-select@latest"></script>到<script src="https://unpkg.com/vue-select@2.4.0/dist/vue-select.js"></script>.它有效。运行代码，以便您知道我在说什么...

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>

Answer 2

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

如果您在选择后坚持删除 foo 选项，您可以通过观察模型("已选择"(并检查其值是否已更改，然后从选项中删除 foo 来完成。此外，如果您删除foo，则可以获取模型的先前值("已选择"(，比较它并将已删除的值放入选项中。

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

希望这对你有所帮助:)