How to handle on change when selecting user from list?

[thanhnx-mor]

Helllo Fritx. I have a question, please let me know how can i handle a function to catch seleted item? And is there anyway to custom a button close(x) the item in textarea?

Please support to me. Thank you very much! @fritx

[fritx]

Hi @thanhnx-mor

Sorry for the late reply

For the "custom a button close(x) the item", pls see the demo (contenteditable div only for now): https://coldemo.github.io/#/playground/vue-at-gh119.js

And for the "function to catch seleted item", you can write a RegExp to match, as it's not yet supported in vue-at. It's also been discussed in https://github.com/fritx/vue-at/issues/8, https://github.com/fritx/vue-at/issues/34

[thanhnx-mor]

@fritx Thank you for support. I have another question, could you support to me?

When $emit('insert'), how can i insert a tag element for this. Ex: When i click choose a item, i want to insert v-model: <a style="color: blue" uuid="123456789">item selected> </a>

[fritx]

@thanhnx-mor I think you're meaning this https://github.com/fritx/vue-at/issues/55 - feature of custom styled tags (embeddedItem)

<at :members="members" name-key="name" v-model="html2">
  <!-- custom tag: avatars -->
  <span slot="embeddedItem" slot-scope="s">
    <span class="tag"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span>
  </span>

  <!-- custom list: avatars -->
  <template slot="item" scope="s">
    <img class="avatar" :src="s.item.avatar">
    <span class="name" v-text="s.item.name"></span>
  </template>

  <div class="editor" contenteditable></div>
</at>

[thanhnx-mor]

@fritx Awesome!!! You are my life saver Sincerely thanks!

[thanhnx-mor]

@fritx Is this a bug? I have a list: 10 item. Items 1,2,3,4,5 ( front of top ) dropdown is ok. But item 6,7,8,9,10 have trouble as above https://media.giphy.com/media/S6CH39IuPcizTmDDrY/giphy.gif

[fritx]

@thanhnx-mor looks like related to the popup layer, the position has problem