How to save vue-emoji-picker selected emoji to db together with text?

I need to save the emoji and text I added to the input with v-emoji-picker to the db.

The emoji I clicked without a problem is displayed in the v-model. However, when I save the text with axios, the body itself appears, not the emoji alias. Doesn’t register in db either.

I need to save the text and emoji as a whole and display them the same way when the page is entered later. here is my code

   <template>

  <div id="exampleInputEmoji">
    <div class="your-input-box">
        <b-btn @click="save()">Save</b-btn>
      <input type="text" v-model="valueInput" />
      <button @click="toogleDialogEmoji">😃</button>
    </div>
    <VEmojiPicker
      v-show="showDialog"
      :style="{ width: '440px', height: '200' }"
      labelSearch="Search"
      lang="pt-BR"
      @select="onSelectEmoji"
    />
  </div>
</template>

<script>
import { VEmojiPicker, emojisDefault, categoriesDefault } from "v-emoji-picker";
import axios from 'axios'
export default {
  name: "exampleInputEmoji",
  components: {
    VEmojiPicker
  },
  data: () => ({
    valueInput: "Someting text ",
    showDialog: false
  }),
  mounted() {
    console.log(categoriesDefault);
    console.log("Total emojis:", emojisDefault.length);
  },
  methods: {
    toogleDialogEmoji() {
      console.log("Toogle!");
      this.showDialog = !this.showDialog;
    },
    onSelectEmoji(emoji) {
        console.log('secilenEmoji',emoji)
      this.valueInput += emoji.data;
      // Optional
      // this.toogleDialogEmoji();
    },
    save(){
     axios
      .post(`http://127.0.0.1:8086/notification`, {
          body:this.valueInput
      })
      .then((response) => response.data);
    }
    
  }
};
</script>

<style lang="css" scoped>
/* THIS IS OPTIONAL */
/* @font-face {
  font-family: NotomojiColor;
  font-weight: 400;
  src: url(
      https://cdn.glitch.com/61908de1-dd0a-4359-a54b-6cb6d41bb5fd%2FNotoColorEmoji.ttf?1513108808150
    )format("truetype");
} */

#exampleInputEmoji {
  position: relative;
}

.your-input-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  padding: 8px;
  font-size: 16px;
  margin-right: 2px;
  border-radius: 4px;
  border: 1px solid #848484;
}

button {
  background: #ececec;
  border-radius: 4px;
  padding: 5px;
  font-size: 22px;
  border: 1px solid #848484;
}
</style>

This is the screenshot of my code Selected emoji information

Emoji appears in the request body but is not saved to the db. Also I can’t show emojis with get when the page is refreshed

Answer

Try to set your db:

ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;

and table:

ALTER TABLE table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

Advertisement

Answer