Vue.js - Listener @oninput.native is not called in b-form-textarea

Question

I have Vue app and I would like to add Facebook inspired buttons in-lined in a comment form. I had plain JS prototype that was working. When I tried to incorporate it into the Vue app I faced an issue with multiple occurrences of the component on the page because it heavily used element id. I would be able to declare dynamic id but this approach was not working well because <style> is static. I found refs later and got inspired by this wonderful article: https://www.telerik.com/blogs/how-to-target-the-dom-in-vue. Long story short: my callback is never called.

Code sandbox

Source code:

<b-form-textarea
  class="textarea" ref="textareaRef"
  rows="1" max-rows="8"
  @oninput.native = "adjustIconsInTextarea"
  :placeholder="$t('comment.write-comment-placeholder')"
  v-model="text"
>

<div class="icons" ref="iconsRef">
  <b-button :id="`emoji_list_${commentId}`" class="mt-2" variant="outline" size="sm">
    &#x1F600;
  </b-button>
</div>

methods: {
adjustIconsInTextarea() {
  const textComment = this.$refs.textareaRef;
  console.log(textComment.value.length);
  const icons = this.$refs.iconsRef;
  if (textComment.value.length > 140) {
    textComment.style.padding = '13px 50px 34px 32px';
    icons.style.top = '-36px';
    icons.style.right = '72px';
  } else {
    textComment.style.padding = '10px 174px 5px 28px';
    icons.style.top = '-45px';
    icons.style.right = '68px';
  }
},

Bootstrap-vue b-form-textarea's events. Where is the error?

you should use @input= "adjustIconsInTextarea"

Boussadjra Brahim
– Boussadjra Brahim

2020-07-29 20:07:21 +00:00
Commented Jul 29, 2020 at 20:07 — Boussadjra Brahim
– Boussadjra Brahim, Commented Jul 29, 2020 at 20:07
That's it, thank you.

Leos Literak
– Leos Literak

2020-07-29 20:09:52 +00:00
Commented Jul 29, 2020 at 20:09 — Leos Literak
– Leos Literak, Commented Jul 29, 2020 at 20:09

Boussadjra Brahim · Accepted Answer · 2020-07-29 20:15:52Z

1

According to the docs:

All native events (other than the custom input and change events) are supported, without the need for the .native modifier.

so you should do :

@input= "adjustIconsInTextarea"

and pass use the event parameter target instead of refs for the textarea :

methods: {
adjustIconsInTextarea(event) {
  const textComment = event.target;
  console.log(textComment.value.length);
  const icons = this.$refs.iconsRef;
  if (textComment.value.length > 140) {
    textComment.style.padding = '13px 50px 34px 32px';
    icons.style.top = '-36px';
    icons.style.right = '72px';
  } else {
    textComment.style.padding = '10px 174px 5px 28px';
    icons.style.top = '-45px';
    icons.style.right = '68px';
  }
},

answered Jul 29, 2020 at 20:15

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leos Literak Over a year ago

Thanks for your hint. Now the problem is that vue component does not have the style property like DOM element.

Leos Literak Over a year ago

New question: stackoverflow.com/questions/63166772/…

Collectives™ on Stack Overflow

Vue.js - Listener @oninput.native is not called in b-form-textarea

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related