質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

0回答

651閲覧

絵文字入力が一文字しか入力できず、上書きされてしまう。

Tikka123456

総合スコア34

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2021/12/19 02:12

vue-emoji-pickerというライブラリを使って絵文字入力を作り、Vuexで処理を管理しています。
現在の状態だと「????」という絵文字を入力した後、「✊」を入力すると先に入力された絵文字が上書きされて「✊」だけが表示されてしまう。
理想は「????✊」と連続で入力できるようにしたい。

Vuexに処理を移行する前は????✊のように連続で入力できていました。
Emoji.vue

Javascript

1<template> 2 <div> 3 <v-textarea 4 name="input-7-1" 5 filled 6 auto-grow 7 value="" 8 v-model="inputs" 9 ></v-textarea> 10 <emoji-picker @emoji="insert" :search="search"> 11 <div slot="emoji-picker" slot-scope="{ emojis, insert}"> 12 <div> 13 <div> 14 <input type="text" v-model="search"> 15 </div> 16 <div> 17 <div v-for="(emojiGroup, category) in emojis" :key="category"> 18 <h5>{{ category }}</h5> 19 <div> 20 <span 21 v-for="(emoji, emojiName) in emojiGroup" 22 :key="emojiName" 23 @click="insert(emoji)" 24 :title="emojiName" 25 >{{ emoji }}</span> 26 </div> 27 </div> 28 </div> 29 </div> 30 </div> 31 <div slot="emoji-invoker" slot-scope="{ events: { click: clickEvent } }" @click.stop="clickEvent"> 32 <v-btn type="button">リアクション</v-btn> 33 </div> 34 </emoji-picker> 35 36 </div> 37</template> 38 39<script> 40import EmojiPicker from 'vue-emoji-picker' 41import { mapGetters } from "vuex" 42 43export default { 44 components: { 45 EmojiPicker, 46 }, 47 48 computed: { 49 ...mapGetters(["inputs", "search"]) 50 }, 51 52 methods :{ 53 insert(emoji){ 54 this.$store.dispatch('insertactions', emoji) // Vuexの絵文字登録処理を実行 55 } 56 } 57} 58 59 60</script>

action.js(Vuexモジュール)

JavaScript

1const state = { 2 inputs: [], 3 search: '' 4}; 5 6const getters = { 7 inputs: state => state.inputs, 8 search: state => state.search 9 10} 11 12const mutations = { 13 setinputs(state, inputs){ 14 state.inputs = inputs; 15 }, 16 setsearch(state, search){ 17 state.search = search; 18 } 19}; 20 21const actions = { 22 insertactions({ commit }, emoji){ 23 console.log(emoji); 24 let inputs = []; 25 inputs = inputs += emoji; 26 state.inputs = inputs; 27 28 // console.log(state.inputs) 29 30 31 commit("setinputs", inputs); 32 33 } 34}; 35 36export default { 37 state, 38 getters, 39 mutations, 40 actions 41};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問