CODEWITHSUNDEEP
javascripthtmlcssvue.js
tan shi yu
tan shi yu

Reputation: 313

Bootstrap 5 Dropdown not toggling

my code is below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Importing Vue -->
    <script src="https://unpkg.com/vue@next"></script>

    <!-- Import Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    

    <!-- Import App -->
    <script src=".\main.js"></script>

    <!-- Importing Header Component -->
    <script src=".\components\headerObjects\navBar.js"></script>

    <!-- Importing CSS -->
    <link rel="stylesheet" href=".\assets\styles.css">

    <!-- TITLE -->
    <title>Shop Away</title>
</head>

<body>
    <div id="app">
        <header-container></header-container>
    </div>

    <!-- Mount App -->
    <script>
        const mountedApp = app.mount('#app');
    </script>

</body>
</html>


app.component('nav-bar', {
    template:
    /*html*/
    `
    <div class="nav-parent dropdown">
        <button class="nav-button btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">navParent</button>
        <div class="nav-child dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    `
})

I am trying to make the toggle come down but when clicking on them, they just do not come down. I have imported both javascript and CSS from Bootstrap and is wondering if I am doing anything wrong? Thanks!

Upvotes: 0

Views: 543

Answers (1)

Halden Collier
Halden Collier

Reputation: 862

From Bootstrap 5's migration guide:

BREAKING: Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

Please see further information about migration on the Bootstrap website.

Upvotes: 5

Related Questions