Dropdown appears as bullet list and not as button

[martijnhiemstra]

When I use this code from the examples to display a dropdown button then I see a bullet list and not a button with dropdown options:

<dropdown text="Action" type="primary">
    <li><a href="#dropdown">Action</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#dropdown">Separated link</a></li>
</dropdown>

Edit:

The follwoing code does work. Does it have to do with the examples missing a <ul> tag wrapping the <li> elements. If so then you need to update the examples.

<dropdown>
        <button slot="button" type="button" class="btn btn-default dropdown-toggle">
          Action
          <span class="caret"></span>
        </button>
        <ul slot="dropdown-menu" class="dropdown-menu">
          <li><a href="#dropdown">Action</a></li>
          <li><a href="#dropdown">Another action</a></li>
          <li><a href="#dropdown">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#dropdown">Separated link</a></li>
        </ul>
      </dropdown>

Edit 2:

I forgot to add dropdown to my components list. I added it and now I am getting all wierd errors in the console: [Vue warn]: "class" is a reserved attribute and cannot be used as component prop.

That's because the divider has a class prop. Really wierd that it would throw that error on a sub element. Now I get this error:

Vue warn]: Failed to resolve directive: el
(found in <Anonymous>)

Dropdown is really buggy and needs a good look at.