VueJS：如何将emoji表情组件动态嵌入到contentEditable div中

Question

How to embed the emoji component dynamically in contentEditable div while typing some text inside the div.

Here is the extract of my code:

 <picker set="emojione" @select="addEmoji" /> <div> {{ inputBoxValue }} </div> <script> export default { name: 'Some', components: { picker: Picker, emoji: Emoji, }, data() { return { inputBoxValue: '', }; }, methods: { addEmoji() { this.inputBoxValue = ' < emoji emoji = "{ id: " heart_eyes ", skin: 2 }" set = "emojione" size = "16" tooltip = "true" / > '; } } }; <script> 

Answer 1

Your thinking about the problem wrong here, instead of adding the components via a string into the dom you'll need to start using v-for and components. For instance if we create the following component:

<div>
    {{emojiText}}
</div>

<script>
    export default {
       props: ['id', 'set', 'size', 'tooltip'],
        name: 'InnerEmojiHolder',
        data() {
            return {
                emojiText: '',
            };
        },
        methods: {

        },
        ready(){
         // put logic to build emoji here using props
        }
    }; 
<script>

This can then be used inside of your existing component like so:

<picker set="emojione" @select="addEmoji" />
<div>
  <template :for="emoji, index in currentInput">
    <innerEmojiHolder :id="index" :set="emoji.set" :tooltip="emoji.tooltip" :size="emoji.size" : ></innerEmojiHolder>
  </template>
</div>

<script>
    export default {
        name: 'Some',
        components: {
            picker: Picker,
            emoji: Emoji,
            innerEmojiHolder: innerEmojiHolder,
        },
        data() {
            return {
                currentInput: []
            };
        },
        methods: {
            addEmoji() {
             // Push our emoji variables into currentInput
            }
        }
    }; 

This allows us to print out all of the emoji's using a for and will use the data from the parent inside of the child.