概要

Semantic UI Vueの Dropdown コンポーネントを使っていたとき、イベントハンドラの付け方が分からず手間取ってしまったので備忘録としてまとめています。

v-model を使ったパターン

以下コードは公式ドキュメントからの一例です。

<template lang="html">
  <sui-dropdown
    placeholder="Gender"
    selection
    :options="options"
    v-model="current"
  />
</template>

選択するたびに変数 current の値が変化し、こちらは問題なく動きます。
では、v-model を使わずイベントハンドラを設定したい場合はどうすればよいでしょうか？

イベントハンドラを自分で設定したい場合

他の UI フレームワークと同じように sui-dropdown に @change や @select をつけてもうまく行きませんでした。

正解は sui-dropdown-item コンポーネントに select イベントハンドラをつければよかったようです。

<template lang="html">
  <div id="app">
    <sui-dropdown class="icon" icon="wrench" button pointing="bottom left">
      <sui-dropdown-menu>
        <sui-dropdown-item>New</sui-dropdown-item>
        <sui-dropdown-item>Save As</sui-dropdown-item>
        <sui-dropdown-item>Edit</sui-dropdown-item>
      </sui-dropdown-menu>
    </sui-dropdown>
  </div>
</template>

再び公式ドキュメントからの例です。
上記のコードの場合、<sui-dropdown-item @select="$emit('select', $event)"> とすれば選択時に無事イベントが呼ばれるようになります。

すべてに @select と書いていくのは冗長なので v-for を使って書き直すと以下のようになります。

<template lang="html">
  <div id="app">
    <sui-dropdown class="icon" icon="wrench" button pointing="bottom left">
      <sui-dropdown-menu>
        <sui-dropdown-item
          v-for="opt in options"
          :key="opt.value"
          :value="opt.value"
          @select="$emit('select', $event)"
        >
          {{ opt.text }}
        </sui-dropdown-item>
      </sui-dropdown-menu>
    </sui-dropdown>
  </div>
</template>