[e-mail]未在b-form-textarea中调用

Question

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

代码沙盒

源代码：

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

启动b-form-textarea的事件。错误在哪里？

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