fritx / vue-at

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

@at does not return all of the entered text #124

Open meatfound opened 3 years ago

meatfound commented 3 years ago

I'm trying to search member dynamically, but I can't getting a full text that I was inputted. (lost last word..)

here is my code,

       <at
          :members="userInformations.results"
          name-key="name"
          @at="handleAt"
          v-model="newComment"
          class="at-ta"
         >
          <template v-slot:item="s">
            <!-- blah blah -->
          </template>
          <template v-slot:embeddedItem="s">
            <!-- blah blah -->
          </template>
          <div contenteditable class="comment-edit"></div>
        </at>

and my script code,

handleAt(chunk) {
   console.log("handleAt", chunk);
   if (chunk) {
      if (chunk.length > 0) {
        this.queryUserInformations([chunk]);
       }
    }
 }

I was entered text '테스트' , but @at returned '테스'.

is it related an IME ? (https://vuejs.org/v2/guide/forms.html#vmodel-ime-tip) is it Ok with use 中文 or japanese? 谢谢.

fistSea commented 3 years ago

I also encountered this problem, but after the at name, add a space to get the integrity.

fritx commented 3 years ago

hi @fistSea @meatfound , is this live demo working for both of you? https://coldemo.js.org/#/playground/vue-at.js

try to add handleAt like

let App = {
  components: { At: VueAt },
  template: `
    <div class="container">
      <h1>Vue At</h1>
      <a target="_blank" href="https://github.com/fritx/vue-at">
        https://github.com/fritx/vue-at
      </a>
      <at :members="members" v-model="input" @at="handleAt">
        <div class="editor" contenteditable></div>
      </at>
    </div>
  `,
  data() {
    return {
      members: [
        'fritx', 'linguokang', 'huangruichang'
      ],
      input: '@fritx @huangruichang '
    }
  },
  methods: {
    handleAt(chunk) { console.log([chunk]) }
  }
}