2
votes

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.

1
Actually i have tried your code and it works great.!! - Amr Aly
You have the code all in a template literal string somewhere? - Bert
@AmrAly in the code in his question its a template literal string. - Bert
@Bert Evans Yes i have just noticed i that. - Amr Aly
check this fiddle - Saurabh

1 Answers

8
votes

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!