javascript - iView UI 下拉项点击

Question

我正在尝试在 iView ui 中应用单击事件。这是我正在尝试的：

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

该方法markAsRead不运行。我怎样才能让它运行？

Answer 1

从关于 Dropdown 的 iView 文档中，您可以看到当用户单击 Dropdown Item 时，Dropdown 会触发单击事件，该事件以 Dropdown Item 的“名称”作为其参数。

<Dropdown>对于 Dropdown，您可以在（不是 on<DropdownMenu>和 not on ）上使用“on-click”事件（不是本机“click”事件<DropdownItem>）。所以你的代码应该是这样的：

<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>

Answer 2

您应该使用@click 或 v-on:click。

这将起作用：

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

更多关于 VueJS 事件

Answer 3

参考这里的文档http://v3.iviewui.com/components/dropdown-en Dropdown 元素会发出一个“点击”事件，并带有被点击的下拉项目的名称

您需要确保两件事 1. 在 DropdownItem 元素上设置 name 属性 2. 捕获 Dropdown 元素上的点击事件，并像通常处理事件数据一样将 $event 作为参数传递。

这是代码的样子

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

单击下拉菜单项。您将获得“标记为已读”作为 $event 的值。