CODEWITHSUNDEEP
javascriptvue.jsvuejs2
GPiter
GPiter

Reputation: 809

Select and deselect an option from ul

I have this code :

<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>

enter image description here

The problem is that if I selected already white I can't deselect it, I can only select black. Is possible to add the posibility of uncheck it ? Thx in advance and sorry for my english.

Upvotes: 0

Views: 53

Answers (1)

n--
n--

Reputation: 3856

this may work:

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

Upvotes: 2

Related Questions