我需要将我用v- emoji -picker添加到输入的emoji和文本保存到数据库中。
我点击的表情符号没有问题显示在v-model中。但是,当我使用axios保存文本时,出现的是正文本身,而不是表情别名。也不在db中注册。
我需要保存的文字和表情符号作为一个整体,并显示它们相同的方式,当页面进入以后。以下是我的代码
<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
发布于 2021-08-19 22:30:28
尝试设置您的数据库:
ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;
和表:
ALTER TABLE table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
https://stackoverflow.com/questions/68851249
复制相似问题