I have a Vue application and I am trying to incorporate Facebook inspired buttons inline in a comment form. Previously, I had a plain JavaScript prototype that was functional. However, when integrating it into my Vue app, I encountered issues due to multiple occurrences of the component on the page caused by heavy use of element IDs. While attempting to declare dynamic IDs, I realized it did not work well because <style> is static. After some research, I came across the concept of using refs which was highlighted in this helpful article: https://www.telerik.com/blogs/how-to-target-the-dom-in-vue. To summarize, despite implementing this solution, my callback function is still not being called.
Here is a snippet of the 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">
😀
</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';
}
},
Referencing Bootstrap-Vue's b-form-textarea events. Can you spot the error?