Use vue-at with textarea

[haydarai]

When I try to use this example with <div class="editor" contenteditable></div> :

<template>
  <div id="mention">
    <at :members="members" >
      <template slot="item" scope="s">
        <span v-text="s.item"></span>
      </template>

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

It works just fine, but when I change it to use textArea, it didn't work at all. Is there any way I can use vue-at with textarea?

[fritx]

Hi @haydarai , thanks for using vue-at.
Currently vue-at only supports contenteditable, textarea is not yet implemented.

I'm interested in the feature.
Any PR is appreciated too.

[alex-bowers]

Is this something near to the top of your 'To do list'? Would be very useful.

[jbrooksuk]

@fritx is this something you can do?

[fritx]

Yeah, I wanted to have this feature.
Looks like just some api modification.

But I was not very free yet.
Would be great to see some work on this too.

[fritx]

@haydarai @alex-bowers @jbrooksuk hey guys

textarea feature is out with 2.2.0 2.2.1, please try 😃

usage:

<template>
  <at-textarea>
    <textarea></textarea>
  </at-textarea>
</template>

<script>
// import At from 'vue-at' // for content-editable
import AtTextarea from 'vue-at/dist/vue-at-textarea' // for textarea

export default {
  components: { AtTextarea }
}
</script>

npm i -S textarea-caret  # also, for textarea

[nocrates]

@fritx
Just a clarification ... does this use the same attributes and slots as <at> ?

For example, can I do this ?? :

<template>
  <at-textarea :members="members" >
   <template slot="item" scope="s">
        <span v-text="s.item"></span>
     </template>
    <textarea></textarea>
  </at-textarea>
</template>

[nocrates]

Answer: Yes!

[fritx]

@nocrates yes, if you had any problem, let me know.
Btw, a live-demo and documentation is coming soon~~

[pingshunhuangalex]

@fritx Is there a way to make it work with input instead of textarea? Thanks.

[fritx]

@pingshunhuangalex hmm that would be another feature request.
Could you replace your input just with a one-row textarea or not?

Btw, the brand new documentation is out: https://fritx.github.io/vue-at

[seanodotcom]

Thanks for the adding the textarea option. However, two issues:

1. When using v-model on the textarea, the model is not updated when an option is selected, but on the next keystroke. This can lead to incomplete information.

2. A trailing space is added when an option is selected. Can this behavior be removed? Perhaps through an option?

[fritx]

@seanodotcom nice to have your suggestion.

1. Did you put v-model on the <at-ta> instead of <textarea> as documented? -- https://fritx.github.io/vue-at/#/en/vmodel

2. There is a prop suffix but not yet documented which defaults to be ' ' -- https://github.com/fritx/vue-at/blob/dev/src/At.vue#L25-L28, give it a try: <at-ta suffix="">

[ZavilenskyIlya]

Not work v-model . After the message seanodotcom nothing has changed

                 <template>
                                <at-ta :members="members" name-key="value" v-model="text">
                                    <template slot="item" slot-scope="s">
                                        <span v-text="s.item.name"></span>
                                    </template>

                                    <textarea style="width: 100%" ></textarea>
                                </at-ta>
                            </template>

[fritx]

@ZavilenskyIlya is text in your data section?

[ZavilenskyIlya]

@fritx Yes

[hazanncv]

npm i -S textarea-caret

You need to put this in docs!!! I was searching for a while. It works know :))

[fritx]

@hazanncv yes thanks for the suggestion!
It is already documented in the "Textarea" section of Readme
but it is unobvious indeed.