iView UI 下拉项点击答案

【问题标题】：iView UI dropdown item clickiView UI 下拉项点击
【发布时间】：2018-09-23 08:05:10
【问题描述】：

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

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

方法markAsRead 没有运行。我怎样才能让它运行？

【问题讨论】：

标签： javascript vue.js click dom-events iview

【解决方案1】：

从iView documentation on Dropdown 可以看出，当用户点击下拉项时，下拉项会触发点击事件，该事件以下拉项的“名称”作为参数。

对于 Dropdown，您可以在 <Dropdown>（而不是 <DropdownMenu> 和 <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>

【讨论】：

【解决方案2】：

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

这将起作用：

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

more on VueJS events

【讨论】：

不幸的是，两者都不起作用。在他们的文档中，它被列出但不起作用iviewui.com/components/dropdown-en#Dropdown_events

【解决方案3】：

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

您需要确保两件事 1.名称属性设置在DropdownItem元素上 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 的值。

【讨论】：