Vue(Nuxt.js)でチャット機能を実装する5つのパターン

Vue(Nuxt.js)でチャット機能を実装する方法です。
5パターンの実装方法をまとめました。

送信ボタンを押すことで送信する

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <textarea v-model="message"></textarea>
    <button @click="sendChat">送信</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: ''
    }
  },
  methods: {
    sendChat() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

Enterキーを押した時に送信

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <textarea v-model="message" @keyup.enter="pushEnter"></textarea>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: ''
    }
  },
  methods: {
    pushEnter() {
      this.sendChat()
    },
    sendChat() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

@keyup.enter="pushEnter"を設定することでEnterキーを押した時も送信できます。

Enterキーを押した時に送信（日本語変換時のEnterでは送信しない）

日本語変換時のEnterでは送信しない機能を追加したものになります。

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}
    <textarea
      v-model="message"
      @keydown.enter.exact="keyDownEnter"
      @keyup.enter="pushEnter"
    ></textarea>

  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: '',
      keyDownCode: 0
    }
  },
  methods: {
    keyDownEnter(e: any) {
      this.keyDownCode = e.keyCode
    },
    pushEnter() {
      if (this.keyDownCode === 229) {
        return
      }
      this.sendChat()
    },
    sendChat() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

@keydown.enter.exact="keyDownEnter"でEnterキーをkeydownした時のイベントを取得します。
this.keyDownCode = e.keyCodeでkeyCodeを変数に記録します。
EnterキーのkeyCodeは13です。しかし、日本語変換確定時のEnterキーのkeyCodeは229に変わります。
if (this.keyDownCode === 229)で日本語変換確定時の場合は処理を抜けるようにしています。

Enterで送信、Shift+Enterで改行

こちらは過去にまとめたので下記記事をご覧ください。
Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装する

空文字や空白のみでは送信しないようにする

空文字・空白・改行のみの場合、送信しないようにする為には、送信メソッドに処理を追加します。

sendChat() {
  if (!this.message || !this.message.match(/\S/g)) {
    this.message = ''
    return
  }
  this.sendMessage = this.message
  this.message = ''
}