vue-emoji-pickerというライブラリを使って絵文字入力を作りましたが、このままではブラウザを更新すると保存されないので保存をしたいです。
そこで質問なのですが、入力された絵文字の保存方法はどのようすればいいでしょうか?
例えば、axiosでLaravelにAPI通信してDBに保存するのか?、Vuexで保存して表示するのか?
教えていただきたいです。よろしくお願いします。
環境
Nuxtをフロント、LaravelをAPIで構成
"nuxt": "^2.15.7"
Laravel Framework 8.49.1
該当のコード
javascript
1<template> 2 <div> 3 <v-textarea 4 name="input-7-1" 5 filled 6 auto-grow 7 value="" 8 v-model="input" 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" @click="actioninput">リアクション</v-btn> 33 </div> 34 </emoji-picker> 35 36 </div> 37</template> 38 39<script> 40import EmojiPicker from 'vue-emoji-picker' 41 42export default { 43 data(){ 44 return { 45 input: '', 46 search: '', 47 } 48 }, 49 components: { 50 EmojiPicker, 51 }, 52 53 methods :{ 54 insert(emoji){ 55 this.input += emoji 56 } 57 // actioninput(){ 58 // this.$store.dispatch('insert', this.input); 59 // } 60 } 61}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。