Vue.js - 在 b-form-textarea 中未调用侦听器 @oninput.native

Question

我有 Vue 应用程序，我想在评论表单中添加受 Facebook 启发的按钮。我有一个可以工作的普通 JS 原型。当我尝试将其合并到 Vue 应用程序中时，我遇到了页面上多次出现该组件的问题，因为它大量使用了元素 ID。我可以声明动态 id，但这种方法效果不佳，因为 <style> 是静态的。后来我找到了refs，并受到这篇精彩文章的启发：https://www.telerik.com/blogs/how-to-target-the-dom-in-vue。长话短说：我的回调永远不会被调用。

Code sandbox

源代码：

<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 的 events。哪里出错了？

Answer 1

根据docs：

支持所有本机事件（自定义 input 和 change 事件除外），无需 .native 修饰符。

所以你应该这样做：

@input= "adjustIconsInTextarea"

并传递使用event 参数目标而不是refs 作为文本区域：

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';
  }
},