Value Contains HTML & Unable To Use deleteMatch Prop

[JavaGuru-J]

Hi,

I have some questions to understand the concept better.

1. The value contains HTML elements. Is there way to get a plain text by using <div contenteditable />? I cannot use textarea, because I won't be able to give style to the tagged user in the text.

Here is how it looks like when I log the variable:

Due to HTML elements, I am unable to store the value in DB. What kind of approach should I take to store the text that user writes?

2. I am unable to set deleteMatch. My function never gets called when a tagged user is removed from the text. Is there something I am missing?

---

<at
                v-model.trim="comment"
                :deleteMatch="deleteTaggedUser"
                :members="members"
                avoidEmail
                name-key="fullName"
                @insert="taggedUser"
            >
                <span slot="embeddedItem" slot-scope="s">
                    <span class="tag">@{{ s.current.fullName }}</span>
                </span>

                <template slot="item" slot-scope="s">
                    <span>{{ s.item.fullName }}</span>
                </template>

                <div contenteditable />
</at>

Data:

members: [
            {
                id: '111',
                email: '[email protected]',
                fullName: 'Lorem Ipsum'
            },
            {
                id: '222',
                email: '[email protected]',
                fullName: 'Sit Dolor'
            }
]

Method:

deleteTaggedUser(name, chunk, suffix) {
            // Function doesn't get called.
            console.log(name, chunk, suffix);

            return chunk === name + suffix;
},
taggedUser(selectedUser) {
            if (selectedUser) {
                this.taggedMembers.push(selectedUser.id);
            }
}

Let me know if you need more info. Thanks!

cc: @fritx

[jggj21]

In my case I managed to solve it in this way: <div class="editor el-textarea__inner" data-text="Add To Conversation" style="height: 58px;" contenteditable></div>

let textContent = document.querySelector(".editor").textContent;

I don't know if this is the right thing to do