如何解决如何制作切换列表 vue-select?
我需要确保当你点击一个已经处于活动状态的选项时,它会被取消选择。
<v-select class="form-control" name="language" v-model="language" id="language" :options="['English','Polish']" :clearable="false" :searchable="false" :multiple="true" :cloSEOnSelect="false"></v-select>
我无法在 Internet 和文档中找到这方面的信息,所以我希望得到您的帮助。
解决方法
没有任何内置方式或道具可以取消选择 vue-select
包的项目,但是有两种方法可以解决:
1)您可以使用 (option:selecting) 事件自己过滤数组,从而取消选择该选项。查看下面的示例。
<template>
<div>
<v-select
class="form-control"
name="language"
v-model="language"
id="language"
:options="['English','Polish']"
:clearable="false"
:searchable="false"
:multiple="true"
:closeOnSelect="false"
@option:selecting="handleDeselect"
></v-select>
<div class="mt-40">Languages is : {{ language }}</div>
</div>
</template>
<script>
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";
export default {
components: { vSelect },data() {
return {
language: ["English"],};
},methods: {
handleDeselect(e) {
// Check if the lagueage array contains the selected element (e)
// If so,filter the language array
if (this.language.includes(e)) {
this.language = this.language.filter((el) => {
return el != e;
});
}
},},};
</script>
2) 使用 vue-multiselect
包提供开箱即用的取消选择功能(最简单和我喜欢的方式)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。