Dynamically change padding in Vue js 3

Question

Hello I want to change padding based on my selected locale, since div width is changing.

  <div
    class="input-group modal-check-show show-modal"
    :style="paddingLeft"
  >
  . . .
  </div>

const EnPaddingLeft = ref('padding-left: 27%;')
const DePaddingLeft = ref('padding-left: 28%;')
const SrPaddingLeft = ref('padding-right: 33% !important;')

const setPaddingLeft = computed(() => {
  let padding
  if (Tr.currentLocale === 'en') {
    padding = EnPaddingLeft
  } else if (Tr.currentLocale === 'de') {
    padding = DePaddingLeft
  } else if (Tr.currentLocale === 'sr') {
    padding = SrPaddingLeft
  } else {
    padding = EnPaddingLeft
  }
  return padding
})
const paddingLeft = setPaddingLeft

When I change computed to method it shows up at div tag, but it doesn't change padding when I change locale.

Yes it is, everything changes with locale(I mean all the text). — Dusan
– Dusan, Commented Aug 13, 2024 at 15:20
why are EnPaddingLeft etc refs? if they need to be, then surely you need padding = EnPaddingLeft.value etc? — Jaromanda X
– Jaromanda X, Commented Aug 13, 2024 at 15:24
I have added ref so I can access them in method and then I forgot to move it. Probably is that .value(I'm new to it). — Dusan
– Dusan, Commented Aug 13, 2024 at 15:31
in <script setup> You can access any variables, they don't need to be ref - but if they are ref then you access the value using .value — Jaromanda X
– Jaromanda X, Commented Aug 13, 2024 at 15:35

huan feng · Accepted Answer · 2024-08-14 04:07:02Z

1

The primary issue in the provided code is that the computed property setPaddingLeft should be used as a reactive reference in Vue 3. Instead of directly assigning setPaddingLeft to paddingLeft.

In your code, just remove setPaddingLeft and directly return the reactive reference paddingLeft should be fine.

const paddingLeft = computed(() => {
  let padding
  if (Tr.currentLocale === 'en') {
    padding = EnPaddingLeft
  } else if (Tr.currentLocale === 'de') {
    padding = DePaddingLeft
  } else if (Tr.currentLocale === 'sr') {
    padding = SrPaddingLeft
  } else {
    padding = EnPaddingLeft
  }
  return padding
})

// Below assignment is not needed, and will cause issue since paddingLeft is not reactive.
// const paddingLeft = setPaddingLeft

answered Aug 14, 2024 at 4:07

huan feng

8,7043 gold badges40 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

Dynamically change padding in Vue js 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related