时间戳

首页 > 解决方案 > 如何将 vue-emoji-picker 选择的表情符号与文本一起保存到数据库？

javascript - 如何将 vue-emoji-picker 选择的表情符号与文本一起保存到数据库？

问题描述

我需要将使用 v-emoji-picker 添加到输入中的表情符号和文本保存到数据库中。

我点击没有问题的表情符号显示在 v-model 中。但是，当我用 axios 保存文本时，会出现正文本身，而不是表情符号别名。也不在数据库中注册。

我需要将文本和表情符号保存为一个整体，并在以后进入页面时以相同的方式显示它们。这是我的代码

   <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>

这是我的代码截图 选择的表情符号信息

表情符号出现在请求正文中，但未保存到数据库中。刷新页面时，我也无法使用 get 显示表情符号

标签： javascriptvue.jsvuejs2emoji

解决方案

尝试设置您的数据库：

ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;

和表：

ALTER TABLE table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

推荐阅读