fritx
TextArea not working with Vuetify <v-textarea>
Hi,
I'm using the handleAt function to do a call to retrieve the suggestion, this is working well because I have the mention appearing, but I don't know why, when I hit "enter" or if I click on the suggestion nothing occur, and I have this error in the console:
this is my code:
<at-ta :hover-select="false" v-model="message" :members="members" @at="handleAt"> <v-textarea :placeholder="placeholder" :error=!!errors.message :error-messages=errors.message ></v-textarea> </at-ta>
I tried the version 2.4 and the version and same result, the data is not updated in the text area.
Thank you, Alcindo
I found the issue, in the textarea we need to bind the value like that:
<at-ta :hover-select="false" v-model="message" :members="members" @at="handleAt"> <v-textarea :value="message" :placeholder="placeholder" :error=!!errors.message :error-messages=errors.message ></v-textarea> </at-ta>
But now I have one remaining issue, if someone can help me, is the keydown enter didn't work.
@sirsquall hi, what's the <v-textarea> like? Seems the first issue is error in handleAt handler
Hi,
the v-textarea come from vuetify the material design framework, when I paste the raw html instead of the component the "keydown enter" works.
I still have the errors messages, here you can find the code of my method handleAt:
async handleAt (chunk) { this.members = await this.$api.suggest.user({ 'user': chunk, 'limit': 5 }).then(response => { var cleanName = [] response.data.forEach(function (user) { cleanName.push(user.name) }) return cleanName }) },
and this is the results:
["yolo"] 0: "yolo" length: 1 __ob__: Observer dep: Dep {id: 2781, subs: Array(0)} value: ["yolo", __ob__: Observer] vmCount: 0 __proto__: Object __proto__: Array
confirmed that this doens't work with vuetify text-area (v-textarea) component !! i had to replace vuetify component with normal textarea and it started working again.
Oooh, Vuetify has been doing lots of magic in a VTextFIeld.
It's found hard to hack through.
on: Object.assign(listeners, {
blur: this.onBlur,
input: this.onInput,
focus: this.onFocus,
keydown: this.onKeyDown
}),
ref: 'input'
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VTextField/VTextField.js#L332-L338
@sirsquall @shiva298 the PR was created, but seems in my machine the click now has some problem while the keydown works well.
@fritx : In my case, i was able to make it work in mouse click event but not on "Enterkeydown" event, The reason why keydown enter doest work on text-area is because vuetify does e.stopPropagation()
at here : https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VTextarea/VTextarea.js#L103
@shiva298 well it's ok now, will release later.
Forgot to append this.dispatchInput() in PR right here: At.vue and AtTextarea.vue
This will fix the clicking problem and with @keydown.capture fixing the keydown problem.
@sirsquall @shiva298 2.5.0-alpha.2 has been released, try it with vertify plz
npm i -S vue-at@latest
Related commits can be tracked by branch here: https://github.com/fritx/vue-at/commits/fix/issue-89-vuetify-textarea
