v-model textarea not working

[ZavilenskyIlya]

This is not a working code for vue version 2.5.

<template>
  <at-ta :members="members"  v-model="text">
    <textarea class="editor"></textarea>
  </at-ta>
</template>

<script>
import AtTa from 'vue-at/dist/vue-at-textarea'

export default {
  components: { AtTa },
  data () {
    return {
      text: 'Hello World! @Roxie Miles .\[email protected] @小浩 lol',
      members: ['Roxie Miles', 'grace.carroll', '小浩']
    }
  }
}
</script>

[JoshuaeKaiser]

any fix for this? makes the plug in pretty much unusable otherwise...

[fritx]

@ZavilenskyIlya @JoshuaeKaiser sorry for the late response, but v-model should work, for textarea, contenteditable and even vuetify.. See the documentation: https://fritx.github.io/vue-at/#/en/vmodel

You can paste your code here we would help as well.

[JoshuaeKaiser]

hi @fritx thanks for the reply. Its a great component but im having a error around vue model that i think may be tied to the version number of VUE perhaps? as the code is identical to the demo but the result is different. When an option from the mentions is selected, the option gets added to the textarea like normal, however the vue model doesnt get updated until the user either types something additional or preses the space bar/return key.

Its also worth noting that the only way i could even get it to update the vue model at all was by putting vue model on the text area element and not the , like this

<at-ta :ats="atTrigger"  :members="someArray">
    <textarea  v-model="someVar"></textarea>
</at-ta>

//below doesnt work at all

<at-ta :ats="atTrigger"  :members="someArray"  v-model="someVar">
    <textarea></textarea>
</at-ta>

any idea how i can fix the issue where the v model doesnt get auto updated on select of one of the mentions ?

many thanks

[fritx]

@JoshuaeKaiser thanks for use this library. Usage here is recommended to apply v-model onto the <at-ta> 'coz it manipulate the dom directly by inserting something, and it's likely to not have the v-model updated if it was applied on a <textarea> instead

Which version of Vue are you using?

[JoshuaeKaiser]

@fritx the version of Vue im using is 3.5.3. I have tried both, if i inser it on the <at-ta> it does not work at all. If i insert it on the <textarea> it works, but will only update the V-model after I have either presed the space key or typed something else in. This is fine but not very user friendly as if you insert something at the end of a block of text and then say go to save that text by grabing the associated key in data(){} the selected value will be missing unles you remebered to press the space key or types something else.

[fritx]

You are right, but it is supposed that v-model is working well with <at> and <at-ta>, let's figure out what was going wrong.

@JoshuaeKaiser you mean Vue 3.5.3 or Vue-Cli 3.5.3? https://github.com/vuejs/vue/releases https://github.com/vuejs/vue-cli/releases

Looks like that there is no 3.x release in Vue itself, are you sure about that?

[JoshuaeKaiser]

@fritx apologies you are right thats my CLI version.

"textarea-caret": "^3.1.0", "vue": "^2.6.6", "vue-at": "^2.3.2",

these are the versions of all relative depedencies.

this is what i have:

<at-ta :ats="atTrigger" :members="slotList"> <el-input v-model="responseForm.text" type="textarea"></el-input> </at-ta>

^ this works to a degree. I can select and it puts the value in the text area, however it will not update the vue model until i type or press the space bar.

I have also tried this:

<at-ta v-model="responseForm.text" :ats="atTrigger" :members="slotList"> <el-input type="textarea"></el-input> </at-ta>

^ this does not work at all.

**NOTE: i have also tried the same in bot cases with regular input and not just my own custom input compotents --> same exact issue in bot cases

[fritx]

@JoshuaeKaiser ooh are you using <el-input> from element-ui? Have never tried that yet, will look into it then.

[JoshuaeKaiser]

@fritx yes i am. but i have also tested it with a regular old and I have the same issue.

[fritx]

https://github.com/fritx/vue-at#used-with-3rd-party-libraries

[fritx]

It's recommended to use like

<el-input type="textarea" v-model="input">

Or if you need one-line input-box, try

<el-input type="textarea" :rows="1" resize="none" v-model="input">

(Adding resize=none can disable user-resizing as default behavior)

For more detail, see https://github.com/fritx/vue-at/issues/112#issuecomment-616152442

[bigperson]

@JoshuaeKaiser I have the same problem. Have you found a solution?