How do I animate a dropdown list using v-on & boolean statements

Question

I have been trying to make a dropdown open and close normally (animate it) using what I have just learned from a slightly out of date VueJs course, but it does not work. I will further after set my routing there.

It seems that before, in Bootstrap, instead of using .show it used .open for dropdown lists.

I thought that I could play around with a @click method and make it work. If you switch the Boolean at data to true, the dropdown will be open by default, but I do now understand why it won't obey the v-on directive when switching the boolean statement from true to false and so on.

HTML below

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <router-link to="/" class="navbar-brand"><a>Stock Trade</a></router-link>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <router-link :to="{ name: 'portfolio'}" tag="li" class="nav-item nav-link"><a>Portfolio</a></router-link>
                <router-link :to="{name: 'stocks'}" tag="li" class="nav-item nav-link"><a>Stocks</a></router-link>
            </ul>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item nav-link">End Day</li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"
                       href="#"
                       role="button"
                       data-toggle="dropdown"
                       aria-haspopup="true"
                       aria-expanded="false">
                        Save & Load <span class="dropdown-toggle-no-caret"></span>
                    </a>
                    <!-- I must understand why it does not work below-->
                    <div class="dropdown-menu"
                         :class="{show: isDropping}"
                         @click="isDropping = !isDropping"
                         aria-labelledby="navbarDropdown">
                        <a class="dropdown-item " href="#">Save Data</a>
                        <a class="dropdown-item" href="#">Load Data</a>
                    </div>
                </li>
               <strong class="navbar-text" style="color: dimgray">Funds: {{$store.state.funds + ' EUR'}}</strong>
            </ul>
        </div>
    </nav>
</template>

Script part below

<script>
export default {
    data() {
        return {
            isDropping: false
        }
    }
}

</script>

I have hardcoded some style in the template are and below just for now until I am trying to set things up.

<style scoped>
    a {
        color: dimgray;
    }
</style>

Thanks in advance to all.

T. Short · Accepted Answer · 2019-12-22T19:31:18.817

1

Can't see anything wrong off the bat.

Are you sure that the @click event is firing? If the element is covered by another one it would get in the way of the click event.

EDIT:

You could run a test like so:

change

@click="isDropping = !isDropping"

to

@click="test"

And add a new method below data:

methods: {
    test() {
        console.log('Click worked!);
    }
}

And check in the console of the developer tools if you see the log.

edited Dec 22 '19 at 19:31

answered Dec 22 '19 at 19:14

T. Short

3,481
14
30

Yes I am referring to the element with the class `dropdown-menu` that has the `@click` event. Are you sure that this event is firing when you click on the element? – T. Short Dec 22 '19 at 19:28
Oh I see!! Now I've got it. I moved the ```@click``` deal up to the first ```html``` element, the ```div``` wrapper and it now worked well!! I've got your point and thanks so much – Arp Dec 22 '19 at 19:31
@Alioshr Great! – T. Short Dec 22 '19 at 19:32

How do I animate a dropdown list using v-on & boolean statements

1 Answers1