Display fullname but insert username

[wtoalabi]

Hello @fritx @Brimstedt @jezzdk @wangbinyq @4ver @Alideniz
Awesome job people! I am working on a project that involves autosuggesting username of users via the reply textarea. I am just fiddling around with the component and it occurred to me...wouldn't it be cool if we can get object data from the server that looks something like: [{username: "username", name: "Fullname", avatar: "imgurl"}] Then pass the object to the component as a prop. So during search, just the avatar and the fullname will be displayed, but when clicked, the username will be inserted. I think this particular use case would be great for users who do not necessarily know the username to search for, but seeing the name and avatar makes it easy for them to choose.

There's nothing that I would want more than to implement this and just submit a pull request...but hey, this is currently above my learning-pay grade :smile:

But if you genius can buy into this idea and weave your magic wands again...this would be super cool! Thanks everyone!!!!

[Brimstedt]

Perhaps I misunderstand you, but isnt this possible already?

br

[fritx]

@Brimstedt @wtoalabi AHH, seems it is?! as https://github.com/fritx/vue-at#custom-list

<!-- updated: 2022-08-09 -->
<at-ta name-key="username" :members="[
  { username: 'username', displayName: 'fullName', avatar: 'imgUrl' }
]">
  <template slot="item" slot-scope="s">
    <img :src="s.item.avatar">
    <span v-text="s.item.displayName"></span>
  </template>
  <textarea rows="1"></textarea>
</at-ta>

<at name-key="name" :members="[]">
  <template slot="item" scope="s">
    <img :src="s.item.avatar">
    <span v-text="s.item.displayName"></span>
  </template>
  <div contenteditable></div>
</at>

[wtoalabi]

Thanks!!!! Yes, I flirted with the custom list for some time but gave up when I encountered errors like: the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. With your solutions above though, no errors! And it did pop up when @ key was pressed...but its not showing the displayName. However when clicked, the username was inserted. This is how my code currently looks...

And this is how it looks when the @ is typed:

I know somehow it has to do with the 'item' on the slot but I cant just seem to get it to work...what a noob!

[fritx]

@wtoalabi my code above has been corrected, should provide (slot-)scope attribute..

[fritx]

Wait... are you using contenteditable or textarea?

[wtoalabi]

Textarea! Thanks.... Will test this out and report my progress!!!

[fritx]

The code above has been fixed. sorry for the previous typo mistake..