vue.js - 如何制作切换列表 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
提供开箱即用取消选择的包(最简单也是我喜欢的方式)
推荐阅读
- css - 如何使 CSS 转换:缩放在 Chrome 上正常工作?
- aem - 未使用自定义可序列化属性处理吊索作业
- xpath - XSLT/XPath 函数 month-from-dateTime(datetime) 未按预期工作
- python - 手动计算梯度与 PyTorch 链式法则的数值差异
- android - ImageView 上的 GradientColor
- google-cloud-platform - 如何使用 Python SDK 在 Dataproc 上为 us-east4 区域提交作业
- java - Java:使用标准创建内部联接
- python - 在 Pandas 数据框中查找任何 >= x 的单元格值并返回单元格值、列标题、行和相邻单元格值
- c - #define OUTPUT(j) count++ 这是做什么的?
- php - 在 Cakephp3 中更改 FrozenTime 时区