Javascript 从ul中选择并取消选择一个选项

我有以下代码：

<template>
<div>
    <ul class="uk-subnav uk-subnav-pill">
        <li
            v-for="item in options"
            :class="item.value === selectedOption ? 'uk-active' : ''"
            >
                <a
                    href="#"
                    v-on:click="onChange(item.value)"
                >
                    {{ $t(item.name) }}
                </a>
        </li>
    </ul>
</div>
</template>

<script>

export default {
name: "SwitcherFilter",
props: ["options", "type", "selectedOption"],
methods: {
    onChange(value) {
        this.$emit('updateFilter', this.type, value);
    }
}
}
</script>

<style scoped>
.uk-light .uk-subnav-pill > .uk-active > a {
   background: #E8B47B;
   color: black;
   /*font-family: 'Open Sans Condensed';*/
 }
 .uk-light .uk-subnav-pill li > a {
    border: 1px solid #E8B47B;
    color: white;
    text-align: center;
 }
 .uk-subnav-pill > * > :first-child {
    padding: 7px 10px;
 }
 </style>

问题是，如果我已经选择了白色，我不能取消选择，我只能选择黑色。是否可以添加取消选中的可能性？提前谢谢，对不起，我的英语不好。

这可能有用：

v-on:click="onChange(item.value === selectedOption ? '' : item.value)"

这可能会起作用：

v-on:click="onChange(item.value === selectedOption ? '' : item.value)"

添加更新过滤器添加更新过滤器