VueJS: How to embed the emoji component dynamically in 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.