Vue.js - Apply CSS style for textarea based on text length

Question

I have Vue app and I would like to add Facebook inspired buttons inlined in a comment form. I had plain JS prototype that was working. But I cannot make it work inside Vue component. I have implemented two variants, both are called but the style is not changed in either.

callback listening to the input event
condition in the class attribute

The sandbox is there: https://codesandbox.io/s/black-mountain-tryro

Callback variant:

<b-form-textarea
  class="textarea"
  ref="textareaRef"
  rows="1"
  max-rows="8"
  @input="adjustIconsInTextarea"
  placeholder="Type something"
  v-model="text"
></b-form-textarea>

adjustIconsInTextarea() {
  const textComment = this.$refs.textareaRef;
  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";
  }
},

This one fails that Vue component has no syle property: textComment.style.padding

CSS variant:

<b-form-textarea
  class="textarea"
  :class="wrapIcons ? 'textarea_short' : 'textarea_long'"
  rows="1"
  max-rows="8"
  placeholder="Type text"
  v-model="text"
></b-form-textarea>

computed: {
  wrapIcons() {
    return this.text.length > 140;
  }

.textarea {
  height: 40px;
  overflow-y: hidden;
}

.textarea_short {
  padding: 10px 174px 5px 28px;
}

.textarea_long {
  padding: 13px 50px 34px 32px;
}

This one does not modify the style regardless of wrapText computed property value.

How to make it work? Which approach is better?

Ilijanovic · Accepted Answer · 2020-07-30 06:19:25Z

1

Your class syntax is wrong. :class expects an object with the class name as key and true or false as values. Try it like this:

:class="{icons_long: !wrapIcons}"

In my opinion, i would go with the CSS approach

edited Jul 30, 2020 at 6:19

answered Jul 30, 2020 at 6:11

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

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

Comments

Boussadjra Brahim · Accepted Answer · 2020-07-30 10:55:46Z

1

Another and valid syntax is keeping your own and adding back tick ` and string interpolation :

:class="`${wrapIcons ? 'textarea_short' : 'textarea_long'}`"

answered Jul 30, 2020 at 10:55

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Vue.js - Apply CSS style for textarea based on text length

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related