fritx / vue-at

At.js for Vue.
https://fritx.github.io/vue-at/
MIT License
529 stars 114 forks source link

Add param to disallow spaces when matching #18

Closed 4ver closed 7 years ago

gamenic-sandip commented 4 years ago

Hi there @4ver is any option to send user id frontend to backed without showing textare ?

fritx commented 4 years ago

Hi @goldsteinr can not fully understand your question

gamenic-sandip commented 4 years ago

Hello @4ver @goldsteinr Screen Shot 2020-04-27 at 9 45 14 AM 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

Screen Shot 2020-04-27 at 9 45 30 AM 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 commented 4 years ago

@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 commented 4 years ago

Thanks for you reply @fritx

jggj21 commented 3 years ago

I am using this to do it with textarea but I can not solve it, I must necessarily do it with text area since I am using Element UI for which I am using as indicated in the documentation

<at-ta :members="members">
  <!-- slots -->
  <el-input v-model="text" type="textarea"></el-input>
</at-ta>

Pero necesito poder obtener el data-user-id or how else could I solve using for textarea? I currently have it this way:

<at-ta
 :members="members"
 v-model="usersMentioned"
 name-key="name"
 @insert="handleInsert"
 @change="handleAtChange"
 :filterMatch="handleFilter"
 :deleteMatch="handleDelete"
 ref="atTa"
 :avoidEmail="false"
>
    <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>

Thank you very much for the great work of vue-at @fritx