Vue2 component not displaying bootstrap dropdown

Question

I have a Vue child component that displays a bootstrap modal and requires some fields, with one of the fields being a dropdown selection. For whatever reason, the dropdown button doesn't activate, so the dropdown items don't get shown: 'aria-expand' stays false when clicked. My issue is that the code clearly works outside of the component, so I don't really understand what is going wrong. Here's a working JSfiddle of what I'm going for.

The code I'm using for my Vue component is exactly the same with the exception of

`<template>
    <div> 
        // insert jsfiddle code here
    </div>
</template>
<script>
    export default{}
</script>`

The component works fine, with the modal showing when a button is pressed, its only the dropdown that doesnt work. In case its in any way relevant, I'm using single file vue components with laravel.

You have the code all in a template literal string somewhere? — Bert
– Bert, Commented Mar 7, 2017 at 2:28
@AmrAly in the code in his question its a template literal string. — Bert
– Bert, Commented Mar 7, 2017 at 2:35

Ptoir · Accepted Answer · 2017-03-10 19:57:55Z

9

After a few hours of tinkering on this, I realized the problem was with my imports. Not only was I importing bootstrap in my app.js file, but I was also importing it in my layout.php which was causing the problem. Make sure you're only importing once!

answered Mar 10, 2017 at 19:57

Ptoir

1111 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Over a year ago

I had the same problem and the same solution.

Collectives™ on Stack Overflow

Vue2 component not displaying bootstrap dropdown

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related