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 = ''
}