iView UI下拉项单击

Question

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

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

方法markAsRead不运行。我怎么才能让它运行呢？

Answer 1

从iView documentation on Dropdown可以看到，当用户点击Dropdown Item时，Dropdown会触发on-click事件，该事件的参数是Dropdown Item的"name“。

对于Dropdown，您可以在<Dropdown> (不是在<DropdownMenu>上，也不是在<DropdownItem>上)上使用" on -click“事件(而不是本地的”单击“事件)。因此，您的代码应该如下所示：

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

more on VueJS events

Answer 3

这里的http://v3.iviewui.com/components/dropdown-en引用文档，Dropdown元素发出一个'on-click‘事件，其中包含所单击下拉项的名称

您需要确保两件事: 1.在Dropdown元素上设置名称prop 2.捕获DropdownItem元素上的单击事件，并像处理带有事件的数据一样传递$event as参数。

下面是代码的样子

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

单击下拉菜单项。您将获得"Mark as read“作为$event的值。