How to send user_id on mention

[gamenic-sandip]

Hello @4ver @goldsteinr

Here i have list of user on mention and when i select user its sending user_name
I want to send user_id also

For example
If i have two user with same name
User1
User1
and when i send message in my backend i receive two users with same and and its difficult to found which user_id which

So i want to pass here user_id also but not showing here
Here user_name -> OK

Here :-
name-key="displayName" -> Name display on tag option
-> Name send to backend

I want to send user_id to backend without affecting above two

[fritx]

@gamenic-sandip If you are using textarea, it can be hard to achieve.
And if you are using contenteditable, you can use customized tags like

<!-- with Vue 2.6+ 'v-slot' directive -->
<!-- note at least two '<span>' wrapper are required to work -->
<template v-slot:embeddedItem="s">
  <span><span class="tag"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span></span>
</template>

and put a data-user-id onto the <span>,
and try to

let mentionedUserIds = []
editor.querySelectorAll('[data-user-id]').forEach(el => {
  mentionedUserIds.push(el.getAttribute('data-user-id'))
})

when sending messages

[gamenic-sandip]

Thanks for you reply @fritx
Let me try to change text-are to editor

[zhonghao23]

may i know what do you mean by putting data-user-id onto span? @fritx

[fritx]

@zhonghao23 there are two <span> below.

<template v-slot:embeddedItem="s">
  <span><span class="tag"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span></span>
</template>

We can choose either one of them to be <span :data-user-id="s.userId">

[zhonghao23]

thank you for your quick reply @fritx
let mentionedUserIds = []
editor.querySelectorAll('[data-user-id]').forEach(el => {
mentionedUserIds.push(el.getAttribute('data-user-id'))
})
May i know is the editor the class of div contenteditable?

[jggj21]

Thank you very much for the help.

I am using Element UI's textarea and basically I want to obtain only the members that have been selected and thus be able to send them to my backend, I am using v-model in the component but I do not get the expected result.

It is similar to this problem but in my case I am using textarea

<at-ta
     :hoverSelect="true"
     :members="members"
     v-model="usersMentioned"
     name-key="name"
  >
     <template slot="item" slot-scope="s">
        <span v-text="s.item.name"></span>
      </template>

       <el-input
          type="textarea"
          placeholder="Add to Conversation"
          v-model="replyData.message"
         ></el-input>
</at-ta>

reply(){
 console.log(this.usersMentioned) //Show only those mentioned, the array of selected objects.
}