Nuxt.jsでメンション機能を実装する

チャットにメンション機能を追加したい！

vue-mentionというのが良さそう。
これを導入することにしました。

インストールする

vue-mention

yarn add vue-mention

v-tooltipも必要らしい？

追加しておきます。

yarn add v-tooltip

実装する

プラグイン読み込み

import { Mentionable } from 'vue-mention'

componentsに追加

export default {
  components: {
    Mentionable
  },
}

メンション実装

<mentionable
  :keys="['@', '＠']"
  :items="mentionItems"
  insert-space
  @open="onOpen"
>
  <v-text-field
     v-model="message"
     label="送信内容を入力"
     required
  />
  <template #no-result>
     <div class="dim">
        No result
     </div>
  </template>
  <template #item="{ item }">
    <div class="user">
      {{ item.value }}
    </div>
  </template>
</mentionable>

@または＠でユーザーを選択できるようにしたいので、:keysに、@と＠を指定する。
メンションで表示したいものは:itemsに。

この時、:itemsに渡して表示させるものはvalueにしないといけない？
名前を選択しても入力欄がundefinedになってしまい、ちょっとハマりました。

NG

mentionItems = {
  {
    id: 1,
    name: John
  },
  {
    id: 2,
    name: Catherine
  }
}

OK

mentionItems = {
  {
    id: 1,
    value: John
  },
  {
    id: 2,
    value: Catherine
  }
}