iView UI dropdown item click

ui element
element ui autocomplete
element ui pagination
element ui theme
element ui cascader
element ui example
element ui github
element-ui font

I am trying to apply a click event in iView ui. Here is what I am trying:

<DropdownMenu slot="list">
     <DropdownItem @on-click="markAsRead">Mark as read</DropdownItem>
</DropdownMenu>

The method markAsRead doesn't run. How can I make it run?


From iView documentation on Dropdown you can see that when user clicks on Dropdown Item, Dropdown fires on-click event, which has Dropdown Item's "name" as its argument.

For Dropdown you can use "on-click" event (not native "click" event) on <Dropdown> (not on <DropdownMenu> and not on <DropdownItem>). So your code should look like this:

<Dropdown @on-click = "setReadStatus(name)">
    <a href="javascript:void(0)">
        Mark as read/unread
        <Icon type="ios-arrow-down"></Icon>
    </a>
    <DropdownMenu slot="list">
        <DropdownItem :name="read">Mark as read</DropdownItem>
        <DropdownItem :name="unread">Mark as unread</DropdownItem>
    </DropdownMenu>
</Dropdown>

iView UI dropdown item click doesn't work · Issue #4572 · iview/iview , I am trying to apply a click event in iView ui. Here is what I am trying <​DropdownItem @on-click="markAsRead">Mark as read</DropdownItem>  In the Item Details iView, the Edit button is disabled (grayed out) for a locked record. If a record is permanently locked by a user who is unintentionally disconnected, you can choose the Force Unlock button to remove all other user's locks on the record.


You should use @click or v-on:click.

This will work:

<DropdownMenu slot="list">
     <DropdownItem v-on:click="markAsRead">Mark as read</DropdownItem>
</DropdownMenu>

more on VueJS events

javascript - iView UI dropdown item click, From you can see that when user clicks on Dropdown Item, Dropdown fires on-​click event, which has Dropdown Item's "name" as its argument. For Dropdown  From iView documentation on Dropdown you can see that when user clicks on Dropdown Item, Dropdown fires on-click event, which has Dropdown Item's "name" as its argument. For Dropdown you can use "on-click" event (not native "click" event) on <Dropdown> (not on <DropdownMenu> and not on <DropdownItem> ).


Referring to the docs here http://v3.iviewui.com/components/dropdown-en The Dropdown element emits an 'on-click' event with the name of the clicked dropdown item

You need to ensure two things 1. the name prop is set on the DropdownItem element 2. catch the on-click event on the Dropdown element, and pass the $event as parameter as you normally do for handling data with events.

Here's what the code would look like

<Dropdown v-on:on-click="handleDropdownClick($event)">
 <DropdownMenu slot="list">
  <DropdownItem name="Mark as read">Mark as read</DropdownItem>
 </DropdownMenu>
</Dropdown

On click of the dropdown menu item. You will get "Mark as read" as $event's value.

iView, View UI. Not Found. Color; Font; Button; Icon; Grid; Layout; List; Card; Collapse; Split; Divider; Cell; Menu; Tabs; Dropdown; Page; Breadcrumb; Badge; Anchor  This PR is a refactor of the Select component to reduce complexity and code length. It uses the great work done by @Xotic750 and should solve the tab/keyboard navigation functionality related to #1647 Review welcome!


Dropdown, An enterprise-class UI components based on Ant Design and Vue. can wrap them in a Dropdown . By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action. A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options.


How to add limit to iview ui multiple select?, I am trying to add limit to iView ui Multiple select . I want to add something like this max="3" to limit the selected items ones we could also enable the options drop down, check th following example that explains itself :. To open the dropdown menu, use a button or a link with a class of.dropdown-toggle and the data-toggle="dropdown" attribute. Add the.dropdown-menu class to a <div> element to actually build the dropdown menu. Then add the.dropdown-item class to each element (links or buttons) inside the dropdown menu.


Dropdown Tree is a dynamic dropdown menu based on bootstrap and jquery with click handlers, data handlers. With single and multi item select and ajax request for getting data. DEMO. Getting Started: Include JQuery, Bootstrap and FontAwesome. Download the dropdowntree.js and dropdowntree.css. please refer to index.html for full example