首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何将vue- emoji -picker选择的emoji与文字一起保存到db?

如何将vue- emoji -picker选择的emoji与文字一起保存到db?
EN

Stack Overflow用户
提问于 2021-08-19 16:08:11
回答 1查看 106关注 0票数 0

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

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

我需要保存的文字和表情符号作为一个整体,并显示它们相同的方式,当页面进入以后。以下是我的代码

代码语言:javascript
代码运行次数:0
运行
复制
   <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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-19 22:30:28

尝试设置您的数据库:

代码语言:javascript
代码运行次数:0
运行
复制
ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;

和表:

代码语言:javascript
代码运行次数:0
运行
复制
ALTER TABLE table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68851249

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档